How to load a Datatable inside a row of other datatable using child rows (extra information)

TrilceAC

Hi,

I'm following the examples that describes how to get extra details of a row when one of its cells is clicked:
https://datatables.net/examples/server_side/row_details.html
https://datatables.net/examples/api/row_details.html

I'm stuck trying to load another datatable as the extra details. I was thinking that I could firstly create an empty table for the row in question and after that call the function that makes the load of data:

$(function() {
    var table = $('table#containers').DataTable( {
    ...
        "ajax": {
            "type": "GET",
            "url": "/some/url/?" + $.param($('#form-filters').serializeArray()),
        },
    ...
    });

    // Add event listener for opening and closing details
    $('table#containers 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
            var virtual_task_id = row.data()[0];
            var subtable_id = "subtable-"+virtual_task_id;
            row.child(format(subtable_id)).show(); /* HERE I format the new table */
            tr.addClass('shown');
            sub_DataTable(virtual_task_id, subtable_id); /*HERE I was expecting to load data*/
        }
    });
});

The format function that I have created just prints the structure of the table. It does what I expect:

function format ( table_id ) {
    // `d` is the original data object for the row
    return '<table id="'+table_id+'" class="display" border="0" style="padding-left:50px; width:100%;">'+
    '<thead>'+
    '<th>TaskId</th>'+
    '<th>Name</th>'+
    '<th>Creation</th>'+
    '<th>State</th>'+
    '<th>#Jobs</th>'+
    '<th>#Finished</th>'+
    '<th>#Produced</th>'+
    '<th>#Consumed</th>'+           
    '</thead>'+
    '</table>';
}

But I have some trouble understanding how to load data from the server and convert it to a datatable. I thought that calling my sub_DataTable function should do the trick, but in fact it doesn't. Trying my code, there is no call to the server to GET the data.
I see that sub_DataTable function is being called when I click on the cell. It shows or hides the table created by format function, and then it calls to sub_DataTable function, but sub_DataTable does not contact the server to get the data of the table. I'm quite newbie on JavaScript, jQuery and DataTables and probably I'm losing something obvious (sorry), but I don't see what. Here is my sub_DataTable function, which, I think, is the failing one:

function sub_DataTable(vtask_id, table_id) {
    var subtable = $('table#table_id').DataTable({
        "ajax": {
            "type": "GET",
            "url": "/other/url/"+vtask_id
        }
    });
}

Thanks!

TrilceAC

I did a silly mistake in a jQuery selector:

    var subtable = $('table#table_id').DataTable({

Should be:

    var subtable = $('table#'+table_id').DataTable({

It works!!!

luisrortega

try by changing.....

var subtable = $('table#table_id').DataTable({

to

var subtable = $('#' + table_id).DataTable({

or

var subtable = $('table#' + table_id).DataTable({