How To show the Multi Level child row in DataTable

Nosheen Javed

Hello,
I am trying to implement a multilevel child rows. I have seen the example of adding two level row child into the but i am getting errors in achieving multi level child rows.
For-example:
When a user clicks on the row 1, a child row 1 should appear, if a user clicks on child row 1 then further its child gets open if that row has any child.

I have implemented this code:

A data from the TEXT FILE:
{
"data": [
{
"Name": "NY Times",
"Kind": "Site",
"Start_Date": "01/01/2016",
"End_Date": "03/31/2016",
"Cost_Type": "",
"Unit_Type": "",
"Units": "",
"Cost_Rate": "",
"Ext_Cost": "",
"Discount_Amount": ""
},
{
"Name": "Young Moms",
"Kind": "Site",
"Start_Date": "01/01/2016",
"End_Date": "03/31/2016",
"Cost_Type": "",
"Unit_Type": "",
"Units": "",
"Cost_Rate": "",
"Ext_Cost": "",
"Discount_Amount": ""
}

]

Now the script Implementation:
function format ( d ) {
// d is the original data object for the row
return '

' + ''+ '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''+ '

Package_1

Package

01/01/2016

03/31/2016

CPA

Impressions

1

3,500.0000

7,000.00

500.00

';
}

var jsonData =
$(document).ready(function () {
var table = $('#mediaplan-placement').DataTable({
"ajax": "scripts/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "Name" },
{ "data": "Kind" },
{ "data": "Start_Date" },
{ "data": "End_Date" },
{ "data": "Cost_Type" },
{ "data": "Unit_Type" },
{ "data": "Units" },
{ "data": "Cost_Rate" },
{ "data": "Ext_Cost" },
{ "data": "Discount_Amount" }
],

        "bAutoWidth": false,
        "aaSorting": [],
        "searchable": false,
        "language": {
            "zeroRecords": "", /*removed the message, cause there is no in-grid search/filtering applied*/
            "emptyTable": "No Record Found",
            "paginate": {
                "previous": "<<",
                "next": ">>"
            }
        }
    });

    var tablenext;
    // Add event listener for opening and closing details
    $('#mediaplan-placement 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');

        }



    });



});

Thanks in Advance.

allan

I'm afraid DataTables currently only supports one level of children from the parent rows. You could possibly put another table into the child row, which itself could have child rows, but that's the only way it would be possible to do multi-level nesting in DataTables just now.

Allan