Nested Datatable returns undefined rowData on Ajax call

chexki

My Task is to get Nested DataTbless after making an ajax call. I'm Getting the function working. Everytime I make a call it returns the data in main Datatable. But, On Ajax call it gives me rowData is undefined error in Nested datatable.

Since I'm new at using Jquery I couldn't figure out the logical solution.

function ts_data(tabledata,tableChild,Expected_hrs,Hours_logged,Working_days,table_month){
$(document).ready(function() {
var table=$('#example').DataTable( {
        "data": tabledata,
    "retrieve": true,
        "columns": [{
            className:      'details-control',
            orderable:      false,
            data:           null,
            defaultContent: ''
        },
            { "data": "Fullname"},
            { "data": "Hours" },
            { "data": "Present_Hours_month"},
            { "data": "Working_Days" },
            { "data": "Month_Year"}],
        "order": [[1, 'asc']]
    } );
    function format ( rowData ) {
    console.log(rowData);
    var file = jQuery.grep(tableChild, function(obj) {
                        return obj.Fullname === rowData.Fullname;});

    var div = $('<table/>');
            div.DataTable( {"paging":   false,
                            "ordering": true,
                            "info":     false,
                            "data": file,
                            "columns": [
                                    { "title": "Fullname", "data": "Fullname" },
                                    { "title": "Date","data": "Date" },
                                    { "title": "Day","data": "Day" },
                                    { "title": "Logged_Hours","data": "Logged_Hours" },
                                    { "title": "Present_Hours","data": "Present_Hours" }],
                                "order": [[1, 'asc']]})
            return div;
                }

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
});
};

function getMonth(){
                $(document).ready(function() {
                    var month_yr = $('#recent').val();
                    $("#AjaxLoader").show();

                    $.getJSON('/attendance_log' + '/' + month_yr,
                     function(data) {
                     var tabledata = data.Main,
                         tableChild = data.Child,
                         Expected_hrs = data.Expected_hrs,
                         Hours_logged = data.Hours_logged,
                         Working_days = data.Working_days;
                         table_month = data.table_month;
                         console.log(tabledata);
                          /* Formatting function for row details - modify as you need */
                     document.getElementById("table_name").innerHTML = "Attendance log for " + table_month + " Month";
                     $("#AjaxLoader").hide();

             ts_data(tabledata,tableChild,Expected_hrs,Hours_logged,Working_days,table_month);
                     });
                })
}
            var startDate = new Date();
            $('.from').datepicker({
                    autoclose: true,
                    minViewMode: 1,
                    format: 'mm-yyyy'
                }).on('changeDate', function(selected){
                        startDate = new Date(selected.date.valueOf());
                        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
                        $('.to').datepicker('setStartDate', startDate);
                    });

window.onload = function(){
var today = new Date().toISOString().substr(0, 10);
var month_yr = today.substring(5, 7) +"-" + today.substring(0,4);
document.getElementById("recent").setAttribute("value", month_yr);
getMonth()
};

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin