title: Datatable Nested table
body: <p>I'm trying to do a master-detail with datatable, but the responsive detail table is not working. and the detail is as if it were another row, but what I want is to be a separate table, to be able to do things with it.</p>
  
  <p>This is my code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table class="table table-striped table-bordered dt-responsive nowrap table-hover " id="ListaControlCacao" width="100%" aria-describedby="DataTables_Table_0_info" role="grid"&gt;
      &lt;thead&gt;
          &lt;tr role="row"&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Puesto de observación&lt;/th&gt;
              &lt;th&gt;Fecha&lt;/th&gt;
              &lt;th&gt;Observador&lt;/th&gt;
              &lt;th&gt;Boton floral&lt;/th&gt;
              &lt;th&gt;Floracion&lt;/th&gt;
              &lt;th&gt;Maduracion&lt;/th&gt;
              &lt;th&gt;Fructificacion&lt;/th&gt;
              &lt;th&gt;Valoración&lt;/th&gt;
              &lt;th&gt;Rendimiento&lt;/th&gt;
              &lt;th&gt;Enfermedades&lt;/th&gt;
              &lt;th&gt;Plagas&lt;/th&gt;
  
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var  ListaControlCacao = $('#ListaControlCacao').DataTable({
      "ajax": "/PuestoObservacionCacao/ListaPuestoObservacionCacaoxUsuario",
       //"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
      dom: 'rtip',
      select: 'single',
      rowId: 'Id',
      deferRender: true,
      responsive: true,
      language: LenguajeDataTable,
      "columns": [
          {
              "Width": 2,
              "orderable": false,
              "data": null,
              "defaultContent": ''
          },
          { "data": "PuestoObservacionCacao" },
              { "data": "Fecha" },
              { "data": "Observador" },
              { "data": "BotonFloral" },
              { "data": "Floracion" },
              { "data": "Maduracion" },
              { "data": "Fructificacion" },
              { "data": "Valoracion" },
              { "data": "Rendimiento" },
              { "data": "Enfermedades" },
              { "data": "Plagas" }
      ]
  });
  
  $('#ListaControlCacao tbody').on('click', 'td', function () {
  
      if ($(this).index() == 0) { 
          return;
      }
  
      var tr = $(this).closest('tr');
      var row = ListaControlCacao.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()).show();
          tr.addClass('shown');
  
          var xyz =  $('#ListaDetalleControlCacao').DataTable({
  
              "bServerSide": true,
              "sAjaxSource": "/Cacao/ListarControlCacao3?IdPuestoObservacion=" + row.data().Id,
              "bProcessing": true,
              "pageLength": 10,
              //"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
              dom: 'rtip',
              select: 'single',
              rowId: 'Id',
              deferRender: true,
              "responsive": true,
              buttons: [
                  {
                      extend: 'colvis',
                      columns: ':not(:first-child)'
                  }, 
                  'copy', 
                  'csv', 
                  'excel', 
                  'pdf', 
                  'print'
              ],
  
              language: LenguajeDataTable,
              "aoColumns": [
                  {
                      "sName": "Id",
                      "bSearchable": true,
                      "bSortable": true
                  },
                  { "sName": "Fecha" },
                  { "sName": "Observador" },
                  {
                      "sName": "BotonFloral",
                      "sWidth": 2
                  },
                  {
                      "sName": "Floracion",
                      "sWidth": 2
                  },
                  {
                      "sName": "Maduracion",
                      "sWidth": 2
                  },
                  {
                      "sName": "Fructificacion",
                      "sWidth": 2
                  },
                  { "sName": "ValoracionCultivo" },
                  { "sName": "RendimientoCultivo" },
                  { "sName": "Enfermedades" },
                  { "sName": "Plagas" }
              ]
          });
      }
  });
  
  function format() {
      return ' &lt;div class="table-responsive"&gt; &lt;table id="ListaDetalleControlCacao" class="table table-striped table-bordered display responsive dt-responsive nowrap table-hover"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;No.&lt;/th&gt;&lt;th&gt;Fecha&lt;/th&gt;&lt;th&gt;Observador&lt;/th&gt;&lt;th&gt;Boton Floral&lt;/th&gt;&lt;th&gt;Floracion&lt;/th&gt;&lt;th&gt;Maduracion&lt;/th&gt;&lt;th&gt;Fructificacion&lt;/th&gt;&lt;th&gt;Valoracion&lt;/th&gt;&lt;th&gt;Rendimiento&lt;/th&gt;&lt;th&gt;Enfermedades&lt;/th&gt;&lt;th&gt;Plagas&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt; &lt;/div&gt;';
  }
  </code></pre>
  
  <p>And that's how it looks:</p>
  
  <p><a href="https://i.stack.imgur.com/FU39P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FU39P.png" alt="enter image description here"></a></p>