Datatables.net多个嵌套表（折叠不起作用）

Question

我创建了一个演示数据库和嵌套表的演示。我希望有多个级别的父/子进行崩溃/扩展。

我能够创建3个级别的表，但是当我想要折叠第2个嵌套表时，Datatables无法处理它。

JSFiddle

 $(document).ready(function () {
        var table = $('#example').DataTable({'columnDefs': [{
             'targets': 0,
             'className': 'dt-body-center'}]});

        // Add event listener for opening and closing details
        $('#example').on('click', 'td.details-control', function (e) {
        //e.stopPropagation();
        console.log("click parent");
            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
                 callAjax2(row);
                 tr.addClass('shown');
            }
        });

        function callAjax2(row) {

        var table = $('#example2').clone().dataTable( {
                "sDom": 'ti',
                "deferRender": true,
                "processing": true,
                "ajax": '/echo/js/?js={"data" : [ ["__", "aaa", "2", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"] , ["__", "bbb", "2", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"] ] }',
                "columnDefs": [{
                    'targets': 0,
                    'className': 'details-control'}],
                "createdRow": function ( row, data, index ) {
                  var j=0;
                  $('td', row).each(function() {
                    $(this).css("width", arrOfTable1[j]+"px");
                     j++; 
                  });
              }
            });

            table.removeClass("childtable_hidden");

            var child = row.child(table);
           var table_td =$(table).closest('tr td');

           //table_td.attr('id', "coucou");
           table_td.addClass("nestedtable");
           //console.log(table_td);
           child.show();

                table.on({
                  click: function(e){
                        var index = $(this).index();
                        console.log("click index : " + index);
                        e.stopPropagation();

                        var nestedTable = $(this).closest('table.childtable');
                        console.log(nestedTable.html());

                        var tr = $(this).closest('tr');
                        console.log(tr.html());

                        var row = $(nestedTable).DataTable().row(tr);

                        if (row.child.isShown()) {
                            // This row is already open - close it
                            row.child.hide();
                            tr.removeClass('shown');
                        } else {
                            // Open this row
                             callAjax3(row);
                             tr.addClass('shown');
                        }


                }
            }, 'td.details-control');


        }

        function callAjax3(row) {

        var table = $('#example2').clone().dataTable( {
                "sDom": 'ti',
                "deferRender": true,
                "processing": true,
                "ajax": '/echo/js/?js={"data" : [ ["___", "ccc", "3", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"] , ["___", "ddd", "3", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"] ] }',
                "createdRow": function ( row, data, index ) {
                  var j=0;
                  $('td', row).each(function() {
                    $(this).css("width", arrOfTable1[j]+"px");
                     j++; 
                  });
              }
            });

            table.removeClass("childtable_hidden");

            var child = row.child(table);
           var table_td =$(table).closest('tr td');

           //table_td.attr('id', "coucou");
           table_td.addClass("nestedtable");
           //console.log(table_td);
           child.show();

        }

        var arrOfTable1=[],
     i=0;

    $('#example td').each(function() {
     mWid = $(this).width(); 
     arrOfTable1.push(mWid);
    });

    //console.log(arrOfTable1);

    });

.childtable_hidden{
  display:none;
}
.childtable thead{
    display:none;
    //border-collapse: collapse;
    //padding: 0; 
    //cellspacing: 0;
}
.childtable.dataTable tbody th, .childtable.dataTable tbody td {
    //padding: 0;
    //cellspacing: 0;
}



 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

table.dataTable tbody td.nestedtable {
  width:100%;
  background: green;
  padding: 0;
  cellspacing: 0;
}
table.dataTable tbody td.nestedtable td {
  background: green;
  //padding: 0;
  //cellspacing: 0;
}
.nestedtable table {
  width:100%;
  background: blue;
  padding: 0;
  cellspacing: 0;

}
table.dataTable tbody td.nestedtable td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
table.dataTable tbody td.nestedtable tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

<link href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th ></th>
            <th>Item 1</th>
            <th >Item 2</th>
            <th>Item 3</th>
            <th >Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value="hidden 1">
            <td class="details-control">_</td>
            <td>data 1a</td>
            <td>data 1b</td>
            <td>data 1c</td>
            <td>data 1d</td>
        </tr>
        <tr data-child-value="hidden 2">
            <td class="details-control">_</td>
            <td>data 2a</td>
            <td>data 2b</td>
            <td>data 2c</td>
            <td>data 2d</td>
        </tr>
    </tbody>
</table>

    <table id="example2" class="childtable childtable_hidden" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
            </tr>
        </thead>vv
        <tbody>
            <tr>
                <td>Jen</td>
                <td>100</td>
                <td>Left</td>
                <td>Left</td>
            </tr>
            <tr>
                <td>Sal</td>
                <td>88</td>
                <td>Right</td>
                <td>Right</td>
            </tr>
        </tbody>
    </table>vv

几乎在这里工作的新演示JSFiddle。

此用例的问题：展开“data1”行，然后展开“data2”行，并展开“data1 / aaa”行。这将打开一个新表，但它将包含搜索栏和页脚。