multi nested datatables

harjmankoo · May 2019

Hi All
I have seen the following discussion back in 2015 (https://datatables.net/forums/discussion/28700/multi-nested-child-rows) which was basically just closed. Is there an update to this. Is there a way to multi-nest datatables. I have found plenty of examples of parent/child which work fine as child is usually a simple table construction but I have not seen any with parent/child/child-of-child/ etc.
Harj

kthorngren · May 2019

This blog shows how to create the child row as a Datatable along with using Editor. If you don't need the Editor you can ignore that part of the config.
https://datatables.net/blog/2019-01-11

IF you need multiple levels you can expand the example to the number of levels desired.

Kevin

harjmankoo · May 2019

Thanks kthorngren,
I will see if I can follow it and implement it.
Will post back results good or bad :-)
Harj

harjmankoo · May 2019

Hi kthorngren
That worked brilliantly. I have gone to three levels of datatables and all work as expected. Very clean code and thankfully simple enough for even me to understand.
I am using datatables with server-side PHP to retrieve data via ajax from a mysql db. I am happy to post an abridged version of my code if forum participants would like to see it. Please let me know if that would be useful and also where I would put my example.
Thanks again.
Harj

mgeyer · July 2019

@harjmankoo would be great if you could share your code - I'm trying to build it up.

maybe you can share it here: http://live.datatables.net/

thank you!
mg

perrera · November 2019

I can't make it work. Can any of you help me?

colin · November 2019

Hi @perrera ,

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

harjmankoo · March 2020

Sorry All especially mgeyer and perera. I will put code on as soon as I am able.
Harj

harjmankoo · March 2020

Hi All
Here is an abridged version of the code. I have reduced my code to basics so you can use it as a template.
This is on version 1.10 datatable
Javascript/PHP and MySQL

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="scripts/getdata.js" language="javascript" type="text/javascript"></script>
        
        
    </head>
    <body>
        <div>
            <div class="panel panel-primary">
                <div class="panel-heading">HEADING</div>
                <div class="panel-body">
                    <table class='table table-striped table-responsive table-bordered small' id='MAINDataTable' style="width: 100%; font-size: 10px;">
                        <thead>
                            <tr>
                                <th></th> 
                                <th>ColumnNameMainField1</th>
                                <th>ColumnNameMainField2</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            
        </div>
        
       
        
    </body>
</html>

JS (getdata.js)

function loadPalletAwait()
{
    var MAINDataTable = $('#MAINDataTable').DataTable({
        processing: true,
        serverSide: true,
        destroy: true,
        searching: false,
        paging: true,
        pageLength: 10,
        ordering:  true,
        lengthChange: false,
        info: true,
        ajax: {
            url: "getdata.php",
            type: "GET",
            data: {"0": "function1",
                   
            }
        },
        columns: [
            {
            className:'details-control',
            orderable: false,
            data: null,
            defaultContent: '',
            width:'5%'
            
            },
            { data: "DisplayMainField1" },
            { data: "DisplayMainField2" }
            
        ],
        select: {
            style: "single"
        }

    });
                            
   
   
   $('#MAINDataTable tbody').on('click', 'td.details-control', function (event) {
       
        event.stopImmediatePropagation();
        var tr  = $(this).closest('tr'),
           row = $('#MAINDataTable').DataTable().row(tr);

        
       if (row.child.isShown()) {
           destroyChild(row);
           tr.removeClass('shown');

       }
       else {
            displayChildOfTable1(row,row.data().FindField1); 
            tr.addClass('shown');
            
       }
       

    });
    
     
     
}  /* Load Line */

function displayChildOfTable1(row,$Find1)
{
    
    string='<table class="DTTable2 table table-striped table-responsive table-bordered small" id="" style="width: 100%; font-size: 10px;">';
    string = string + '<thead>';
    string = string + '<tr>';
    string = string + '<th></th>'; 
    string = string + '<th>Table2Field1</th>';
    string = string + '<th>Table2Field2</th>';
    string = string + '</tr>';
    string = string + '</thead> ';
    string = string + '</table>';
    var table = $(string);
    

    // Display it in the child row
    row.child( table ).show();
 
    // Initialise as a DataTable
    
     var Table2 = table.DataTable({
        processing: true,
        serverSide: true,
        destroy: true,
        searching: false,
        paging: true,
        pageLength: 10,
        ordering:  true,
        lengthChange: false,
        info: true,
        ajax: {
            url: "getdata.php",
            type: "GET",
            data: {"0": "function2",
                   "Find": $Find1
                   
            }
        },
        columns: [
            {
            className:'details-control2',
            orderable: false,
            data: null,
            defaultContent: '',
            width:'5%'
            
            },
            { data: "Field1" },  
            { data: "Field2" }
            
            
        ],
        select: {
            style: "single"
        }
        

    });
                            
   
    $('.DTTable2 tbody').on('click', 'td.details-control2', function (event) {
       
        
        
        event.stopImmediatePropagation();
        var tr  = $(this).closest('tr'),
           row = $('.DTTable2').DataTable().row(tr);

        
       if (row.child.isShown()) {
           destroyChild2(row);
           tr.removeClass('shown');

       }
       else {
            displayChildOfTable2(row,row.data().FindField2); 
            tr.addClass('shown');
            
       }
       

    });
    
    
    
    
    
     
}  

function displayChildOfTable2 ( row,$Find2 ) {
     
     // This is the table we'll convert into a DataTable
     // Note that id is blank. This is also important as id has to be unique which it cant be if we are 
     // creating the same table over and over again. Left as blank will prevent system getting confused
     // Can leave id completely out but left in to make it more obvious what we are doing
     
     string='<table class="DTTable2 table table-striped table-responsive table-bordered small" id="" style="width: 100%; font-size: 10px;">';
     string = string + '<thead>';
    string = string + '<tr>';
    string = string + '<th></th>'; 
    string = string + '<th>Table3Field1</th>';
    string = string + '<th>Table3Field2</th>';
    string = string + '</tr>';
    string = string + '</thead> ';
    string = string + '</table>';
    var table = $(string);
    
    // Display it in the child row
    row.child( table ).show();
 
    // Initialise as a DataTable
    
     var Table3 = table.DataTable({
        processing: true,
        serverSide: true,
        destroy: true,
        ajax: {
            url: "getdata.php",
            type: "GET",
            data: {"0": "function2",
                   "Find": $Find2
                   
                   
            }
        },
        columns: [
            {
            className:'details-control3',
            orderable: false,
            data: null,
            defaultContent: '',
            width:'5%'
            
            },
            { data: "field1" },  
            { data: "field2" }
            
       ],
        searching: false,
        paging: true,
        pageLength: 10,
        ordering:  true,
        lengthChange: false,
        info: true,
        select: {
            style: "single"
        },
         
    });


    
     
}

function destroyChild(row) {
    var table = $("Table2", row.child());
    table.detach();
    table.DataTable().destroy();
 
    // And then hide the row
    row.child.hide();
}
function destroyChild2(row) {
    var table = $("Table3", row.child());
    table.detach();
    table.DataTable().destroy();
 
    // And then hide the row
    row.child.hide();
}

CSS

// This is just for the + and - buttons which expand and close the child rows.
// You can use any image that you have available
td.details-control {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control2 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control2 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

td.details-control3 {

    background: transparent url(../images/details_open.png) no-repeat center center;
    

    cursor: pointer;

}

tr.shown td.details-control3 {

    background: transparent url(../images/details_close.png) no-repeat center center;

}

veli · January 2021

Hi all,
@harjmankoo thanks for your code. I try to make it in angularjs and it doesnt show the table. Here is my code and problem:

I would really appreciate your help

  var data = [

            {

                "DT_RowId": "row_1000",

                "clientID": 10407,

                "clientName": "DowDuPont Inc.",

                "wip": "$583,341 ",

                "ar": "$646,385",

                "ar0_30": "$500,389",

                "ar31_60": "$129,016",

                "ar61_90": "$15,822",

                "ar91_120": "$1,122",

                "ar121_": "$31",

                "suspense": "$8,247"

            },

            {

                "DT_RowId": "row_1001",

                "clientID": 36526,

                "clientName": "Maxwell Technologies, Inc.",

                "wip": "$576,521 ",

                "ar": "$930,316",

                "ar0_30": "$522,322",

                "ar31_60": "$378,794",

                "ar61_90": "$25,030",

                "ar91_120": "$3,629",

                "ar121_": "$494",

                "suspense": "$6,931"

            }
        ];

        var childEditors = {};  // Globally track created chid editors
        var childTable;
        var childTable2;

        /*   ----------------  Definition Haupttabelle------------------------------*/
        vm.show_child = false;
        vm.show_inChildRow = false;

        vm.example_dtOptions = create_dt_options();
        vm.example_dtColumns = create_dt_columns();
        vm.example_dtInstance = {};

        function create_dt_options() {
            var _data = data;
            var _dt_options = DataTableService.create_dt_options_local_data(vm, _data);

            _dt_options.rowCallback = rowCallback;
            _dt_options.createdRow = createdRow;

            return _dt_options;
        }

        function create_dt_columns() {
            var _columns = [
                {
                    className: 'details-control',
                    orderable: false,
                    data: null,
                    defaultContent: ''
                },
                {data: "clientID"},
                {data: "wip"},
                {data: "ar"},
                {data: "ar0_30"},
                {data: "ar31_60"},
                {data: "ar61_90"},
                {data: "ar91_120"},
                {data: "ar121_"},
                {data: "suspense"}
            ];

            return _columns;
        }
        
        // Callback-Funktion für ganze Zeile (hier: Click-Event auf Zeile)
        // Add event listener for opening and closing first level childdetails
        function rowCallback(tabRow, data, dataIndex) {
            $(tabRow).unbind("click");
            $(tabRow).bind('click', function (){
                $scope.$apply(function () {
                    $('#example tbody').on('click', 'td.details-control', function (event) {
                        event.stopImmediatePropagation();
                        var tr  = $(this).closest('tr'),
                            row = $('#example').DataTable().row(tr);

                        if (row.child.isShown()) {
                            destroyChild(row);
                            tr.removeClass('shown');

                        }
                        else {
                            displayChildOfTable1(row,row.data());
                            tr.addClass('shown');

                        }

                    })
                    /*
                    event.stopImmediatePropagation();
                    var tr = $(tabRow);
                    // console.log("tr",tr);
                    var table = vm.example_dtInstance.DataTable;
                    var row = table.row(tr);

                    console.log("tr", tr);
                    console.log("row", row);


                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide()

                    /!*    var table = $("#dataTable_child1");
                            table.detach();
                            table.DataTable().destroy();
*!/
                            // And then hide the row
                            row.child.hide();
                        tr.removeClass('shown');
                    }

                    else {
                       // row.child( format(row.data())).show;
                        console.log("row.data()",row.data());
                        console.log("tabRow", tabRow)
                        // Open this row
                      //  var table = $('#dataTable_child1');

                        //Display it in the child row

                        row.child.show();

                      //  $timeout(function(){displayChildOfTable1(row);},100);
                        tr.addClass('shown');
                    }*/
                });

            });
        }

        function createdRow(row, data, dataIndex) {
            // Recompiling so we can bind Angular directive
            $compile(angular.element(row).contents())($scope);
        }

        /*  ---------------------------------------------------------------------------------------------------------------*/

        /*   --------------------------------  Anfang Definition Child1 Tabelle--------------------------------------------*/


        function displayChildOfTable1(row, data) {

            vm.child1_dtOptions = create_dt_options_child1();
            vm.child1_dtColumns = create_dt_columns_child1();
            vm.child1_dtInstance = {};

            function create_dt_options_child1() {
                var _data = data_child;
                var _dt_options = DataTableService.create_dt_options_local_data(vm, _data);

                _dt_options.rowCallback_child = rowCallback_child1;
                _dt_options.createdRow_child = createdRow_child1;
                return _dt_options;
            }

            function create_dt_columns_child1() {
                var _columns = [
                    {
                        className: 'details-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                    },
                    {
                        data: "wip",
                        title: "wip"
                    },
                    {data: "ar"},
                    {data: "ar0_30"},
                    {data: "ar31_60"},
                    {data: "ar61_90"},
                    {data: "ar91_120"},
                    {data: "ar121_"},
                    {data: "suspense"}
                ];

                return _columns;
            }

            function createdRow_child1(row, data, dataIndex) {
                // Recompiling so we can bind Angular directive
                console.log('hi vom created_child1');
                $compile(angular.element(row).contents())($scope);
            }

            var string = '<table id="dataTable_child1"' +
                ' datatable=""' + ' dt-options="vm.child1_dtOptions"' +
                ' dt-columns="vm.child1_dtColumns"' +
                ' dt-instance="vm.child1_dtInstance"' +
                ' class="DTTable2 kiss-grid">';
            string = string + '</table>';
            var table = $(string);

            // Display it in the child row
            row.child( table ).show();


            // Callback-Funktion für ganze Zeile (hier: Click-Event auf Zeile)
            // Add event listener for opening and closing second level childdetails
            function rowCallback_child1(tabRow, data, dataIndex) {
                console.log("hiiii")
                $(tabRow).unbind("click");
                $(tabRow).bind("click", function () {
                    $scope.$apply(function () {
                        //event.stopImmediatePropagation();
                        console.log("row", row);
                        console.log("data", data);
                        console.log("index", dataIndex);
                        console.log("click");

                        var tr = $(tabRow);
                        console.log("tr", tr);
                        var table = vm.child1_dtInstance.DataTable;
                        var row = table.row(tr);

                        if (row.child.isShown()) {
                            // This row is already open - close it
                            vm.show_child = false;
                            row.child.hide();
                            tr.removeClass('shown');

                            // Destroy the Child Datatable
                            //  $('#cl' + data.clientID).DataTable().destroy();
                        }
                        else {
                            // Open this row

                            //displayChildOfTable2( row);

                            tr.addClass('shown');

                        }
                    });

                });
            }
        }

        function destroyChild(row) {
            var table = $("#example", row.child());
            table.detach();
            table.DataTable().destroy();

            // And then hide the row
            row.child.hide();
        }
    }

Any Ideas why it does not show the child table?

colin · January 2021

@veli 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

multi nested datatables

multi nested datatables

Answers

Howdy, Stranger!

Categories

DataTables

multi nested datatables

multi nested datatables

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables