Nested dataTable in server side row details

Sevren

Hi all, i have been looking at the (server side row details demo): http://www.datatables.net/examples/server_side/row_details.html

I understand that example, as it pulls all the data from the targeted table and displays the extra in the format but how I am unsure of how to add another data table in place of the details?

For example: My main data table will be pulling information from a projects database, once displayed and the user clicks on the little green + symbol another independent data table should be created from a different table based on the project ID

I think I have to modify the row.child(format(row.data()) function and instanciate another datatable there?

$('#example tbody').on( 'click', 'tr td:first-child', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
 
        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();
 
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();
 
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

Thanks

rbyrns

Any luck here? I too would like to see a modern version with a full array of data in a sub table.

allan

To put another DataTable in the child row your format() function (or whatever you call it) would return a standard HTML table. Then you would simply initialise DataTables on it.

You can use row().child() to get a reference to the recently added child row and select the table from it to construct the DataTable.

I should point out that the child table is 100% independent from the parent table.

Allan