title: Datatables.net multiple Nested tables (collapse doesn't work)
body: <p>I created a demo to play with Datatables and nested tables.  I wanted to have multiple level of parent/child with collapse/expand.</p>
  
  <p>I was able to create 3 levels of tables, but when I want to collapse the 2th nested table, Datatables is not able to handle it.</p>
  
  <p><a href="https://jsfiddle.net/survivant/qxfhh024/2/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(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);
  
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"&gt;&lt;/script&gt;
  &lt;table id="example" class="display nowrap" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th &gt;&lt;/th&gt;
              &lt;th&gt;Item 1&lt;/th&gt;
              &lt;th &gt;Item 2&lt;/th&gt;
              &lt;th&gt;Item 3&lt;/th&gt;
              &lt;th &gt;Item 4&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr data-child-value="hidden 1"&gt;
              &lt;td class="details-control"&gt;_&lt;/td&gt;
              &lt;td&gt;data 1a&lt;/td&gt;
              &lt;td&gt;data 1b&lt;/td&gt;
              &lt;td&gt;data 1c&lt;/td&gt;
              &lt;td&gt;data 1d&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr data-child-value="hidden 2"&gt;
              &lt;td class="details-control"&gt;_&lt;/td&gt;
              &lt;td&gt;data 2a&lt;/td&gt;
              &lt;td&gt;data 2b&lt;/td&gt;
              &lt;td&gt;data 2c&lt;/td&gt;
              &lt;td&gt;data 2d&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
      &lt;table id="example2" class="childtable childtable_hidden" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;Col 1&lt;/th&gt;
                  &lt;th&gt;Col 2&lt;/th&gt;
                  &lt;th&gt;Col 3&lt;/th&gt;
                  &lt;th&gt;Col 4&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;vv
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Jen&lt;/td&gt;
                  &lt;td&gt;100&lt;/td&gt;
                  &lt;td&gt;Left&lt;/td&gt;
                  &lt;td&gt;Left&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Sal&lt;/td&gt;
                  &lt;td&gt;88&lt;/td&gt;
                  &lt;td&gt;Right&lt;/td&gt;
                  &lt;td&gt;Right&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;vv</code></pre>
  </div>
  </div>
  </p>
  
  <p>New Demo that almost work here <a href="http://jsfiddle.net/survivant/p1uuq0ew/2/" rel="nofollow noreferrer">JSFiddle</a>. </p>
  
  <p>The problem with this usecase : Expand the row with "data1", after that expand the row "data2", and expand the row "data1/aaa).  That will open a new table, but it will contains the search bar and footer.</p>