title: Datatable with nested table doesn't have functionality
body: <p>The main function of this html file is to contain a main datatable that whenever I click on a row, It should show me a details table of data relating to that row but I've been having some isues. First, the main table which I created as a datatable doesn't work with the functionality of a datatable, just with the functionality of a normal table. Second, whenever I click on the rows to display the details table, it only displays inside the first column of the main table. Any help would be appreciated.</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
  
  
      &lt;script src="https://code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;link rel="icon" href="./resources/logo.jpg"&gt;
  
  
  
  &lt;script&gt;     
  
      $(document).ready(function() {
  
          var oTable = $('#maintable').dataTable( {
  
              "aoColumnDefs": [
                  { "bSortable": true, "aTargets": [ 0 ] }
              ],
              "aaSorting": [[1, 'asc']],
  
              "language": {
                  "lengthMenu": "Mostrar _MENU_ datos por pagina.",
                  "zeroRecords": "Nada fue encontrado.",
                  "info": "Mostrando _PAGE_ de _PAGES_",
                  "infoEmpty": "No hay datos disponibles",
                  "infoFiltered": "(filtrado de _MAX_ datos totales)",
                  "search": "Buscar:",
                  "paginate": {
                      "first":      "Primero",
                      "last":       "Ultimo",
                      "next":       "Proximo",
                      "previous":   "Previo"
                  }
              }
  
  
          }); 
      });    
  
  &lt;/script&gt;   
  
  
  
  
      &lt;title&gt;Consulta de facturas atrasadas&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
          html, #page { padding:0; margin:0;}
          body { margin:0; padding:0; width:100%; color:#959595; font:normal 12px/2.0em Sans-Serif;} 
          h1, h2, h3, h4, h5, h6 {color:darkblue; text-align: center;}
  
          #page { background:#fff;}
          #header, #footer{ margin:0; padding:0;}
  
  
          #logo { padding:0; width:auto; text-align: center; margin: auto;}
  
          #header { background:#fff; }
          #header-inner { margin:0 auto; padding:0;}
  
  
          #footerblurb { background:#d3d3f9;color:blue; width: 100%;}     
  
          #footer { background:#fff; width: 100%;}
          #footer-inner { margin:auto; text-align:center; padding:12px;}
          #footer a {color:blue;text-decoration:none;}
  
          #maintable {
  
              text-align: center;             
  
          }
  
          .hiddenRow {
              padding: 0 !important;
          }   
  
  
  
          #events {
              margin-bottom: 1em;
              padding: 1em;
              background-color: #f6f6f6;
              border: 1px solid #999;
              border-radius: 3px;
              height: 100px;
              overflow: auto;
          }
  
          td.highlight {
              background-color: whitesmoke !important;
          }
  
          .details-control {
  
  
          }
  
          #container {
  
              width:90%;
              margin: 0 auto;
  
          }
  
          #titulo {
  
              margin: 0 auto;
  
          }
  
  
          div.slider {
              display: none;
          }
  
          table.dataTable tbody td.no-padding {
              padding: 0;
          }
  
          th {
  
              text-align: center;
  
          }
  
          .bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
  
  
          #col-lg-6 {
              margin: auto;
          }
  
          #formulario{
              margin: auto;
              column-width: 80%;
          }
          .clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
          &lt;br&gt;
      &lt;div id="page"&gt;
          &lt;header id="header"&gt;
              &lt;div id="header-inner"&gt; 
                  &lt;div id="logo"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div id="titulo"&gt;
                      &lt;h2&gt;Consulta de facturas atrasadas&lt;/h2&gt;
                  &lt;/div&gt;
  
                  &lt;div class="clr"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;br&gt;    
  
          &lt;div id="container"&gt;
  
          &lt;table id="maintable" class="row-border hover order-column display table table-striped" cellspacing="0" width="100%" style="border-collapse:collapse;"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
  
                      &lt;th&gt;Codigo&lt;/th&gt;
                      &lt;th&gt;Nombre&lt;/th&gt;
                      &lt;th&gt;Propietario&lt;/th&gt;
                      &lt;th&gt;Direccion&lt;/th&gt;
                      &lt;th&gt;Ciudad&lt;/th&gt;
                      &lt;th&gt;Sector&lt;/th&gt;
                      &lt;th&gt;Cedula&lt;/th&gt;
                      &lt;th&gt;Tel. 1&lt;/th&gt;
                      &lt;th&gt;Tel. 2&lt;/th&gt;
                      &lt;th&gt;Celular&lt;/th&gt;
  
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
  
              &lt;tbody&gt;
  
                  &lt;tr data-toggle="collapse" data-target="#1" class="accordion-toggle"&gt;
  
                      &lt;td&gt;Codigo&lt;/td&gt;
                      &lt;td&gt;2011/02/02&lt;/td&gt;
                      &lt;td&gt;Propietario&lt;/td&gt;
                      &lt;td&gt;Direccion&lt;/td&gt;
                      &lt;td&gt;Ciudad&lt;/td&gt;
                      &lt;td&gt;Sector&lt;/td&gt;
                      &lt;td&gt;Cedula&lt;/td&gt;
                      &lt;td&gt;Tel. 1&lt;/td&gt;
                      &lt;td&gt;Tel. 2&lt;/td&gt;
                      &lt;td&gt;Celular&lt;/td&gt;
  
                  &lt;/tr&gt;
  
                      &lt;tr&gt;
  
                          &lt;td class="hiddenRow"&gt;&lt;div class="accordian-body collapse" id="1"&gt; 
                            &lt;table id="a" class="table table-striped" style="width:100%; text-align: center"&gt;
  
                                    &lt;thead&gt;
  
                                      &lt;tr&gt; 
                                          &lt;th&gt;Factura&lt;/th&gt; 
                                          &lt;th&gt;Fecha&lt;/th&gt; 
                                          &lt;th&gt;Dias&lt;/th&gt; 
                                          &lt;th&gt;Monto&lt;/th&gt; 
                                          &lt;th&gt;Pendiente&lt;/th&gt; 
                                          &lt;th&gt;Vendedor&lt;/th&gt; 
                                      &lt;/tr&gt;
  
  
                                    &lt;/thead&gt;
  
                                    &lt;tbody&gt;
  
                                      &lt;tr&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;2015/04/15&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                      &lt;/tr&gt;
  
                                      &lt;tr&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;2011/04/15&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                      &lt;/tr&gt;
  
                                    &lt;/tbody&gt;
  
                            &lt;/table&gt;
                          &lt;/div&gt;
                          &lt;/td&gt;
  
                      &lt;/tr&gt;
  
  
  
  
                  &lt;tr data-toggle="collapse" data-target="#2" class="accordion-toggle"&gt;
  
                      &lt;td&gt;Codigo&lt;/td&gt;
                      &lt;td&gt;Nombre&lt;/td&gt;
                      &lt;td&gt;Propietario&lt;/td&gt;
                      &lt;td&gt;Direccion&lt;/td&gt;
                      &lt;td&gt;Ciudad&lt;/td&gt;
                      &lt;td&gt;Sector&lt;/td&gt;
                      &lt;td&gt;Cedula&lt;/td&gt;
                      &lt;td&gt;Tel. 1&lt;/td&gt;
                      &lt;td&gt;Tel. 2&lt;/td&gt;
                      &lt;td&gt;Celular&lt;/td&gt;
  
                  &lt;/tr&gt;
  
                      &lt;tr&gt;
  
                          &lt;td class="hiddenRow"&gt;&lt;div class="accordian-body collapse" id="2"&gt; 
                            &lt;table id="b" class="table table-striped" style="width:100%; text-align: center"&gt;
  
                                    &lt;thead&gt;
  
                                      &lt;tr&gt; 
                                          &lt;th&gt;Factura&lt;/th&gt; 
                                          &lt;th&gt;Fecha&lt;/th&gt; 
                                          &lt;th&gt;Dias&lt;/th&gt; 
                                          &lt;th&gt;Monto&lt;/th&gt; 
                                          &lt;th&gt;Pendiente&lt;/th&gt; 
                                          &lt;th&gt;Vendedor&lt;/th&gt; 
                                      &lt;/tr&gt;
  
  
                                    &lt;/thead&gt;
  
                                    &lt;tbody&gt;
  
                                      &lt;tr&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;2012/04/15&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                      &lt;/tr&gt;
  
                                      &lt;tr&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;2011/04/15&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                          &lt;td&gt;Factura&lt;/td&gt; 
                                      &lt;/tr&gt;
  
                                    &lt;/tbody&gt;
  
                            &lt;/table&gt;
                          &lt;/div&gt;
                          &lt;/td&gt;
  
                      &lt;/tr&gt;
  
                  &lt;tr&gt;
  
                      &lt;td&gt;Codigo&lt;/td&gt;
                      &lt;td&gt;Nombre&lt;/td&gt;
                      &lt;td&gt;Propietario&lt;/td&gt;
                      &lt;td&gt;Direccion&lt;/td&gt;
                      &lt;td&gt;Ciudad&lt;/td&gt;
                      &lt;td&gt;Sector&lt;/td&gt;
                      &lt;td&gt;Cedula&lt;/td&gt;
                      &lt;td&gt;Tel. 1&lt;/td&gt;
                      &lt;td&gt;Tel. 2&lt;/td&gt;
                      &lt;td&gt;Celular&lt;/td&gt;
  
                  &lt;/tr&gt;
                  &lt;tr&gt;
  
                      &lt;td&gt;Codigo&lt;/td&gt;
                      &lt;td&gt;2011/02/02&lt;/td&gt;
                      &lt;td&gt;Propietario&lt;/td&gt;
                      &lt;td&gt;Direccion&lt;/td&gt;
                      &lt;td&gt;Ciudad&lt;/td&gt;
                      &lt;td&gt;Sector&lt;/td&gt;
                      &lt;td&gt;Cedula&lt;/td&gt;
                      &lt;td&gt;Tel. 1&lt;/td&gt;
                      &lt;td&gt;Tel. 2&lt;/td&gt;
                      &lt;td&gt;Celular&lt;/td&gt;
  
                  &lt;/tr&gt;
                  &lt;tr&gt;
  
                      &lt;td&gt;Codigo&lt;/td&gt;
                      &lt;td&gt;Nombre&lt;/td&gt;
                      &lt;td&gt;Propietario&lt;/td&gt;
                      &lt;td&gt;Direccion&lt;/td&gt;
                      &lt;td&gt;Ciudad&lt;/td&gt;
                      &lt;td&gt;Sector&lt;/td&gt;
                      &lt;td&gt;Cedula&lt;/td&gt;
                      &lt;td&gt;Tel. 1&lt;/td&gt;
                      &lt;td&gt;Tel. 2&lt;/td&gt;
                      &lt;td&gt;Celular&lt;/td&gt;
  
                  &lt;/tr&gt;
              &lt;/tbody&gt;
  
  
  
  
          &lt;/table&gt;    
  
  
          &lt;/div&gt;  
  
          &lt;script&gt;
            var table = document.getElementById("a");
            for(var i = 0; i &lt; table.rows.length; i ++) {
              var d = new Date(table.rows[i].cells[1].innerHTML).getTime();
              var difference = new Date().getTime();
              console.log(((difference - d)/86400000) &gt; 100);
              if(((difference - d)/86400000) &gt; 1000)
                table.rows[i].style.background = "red";
            }
          &lt;/script&gt;   
  
  
  
  
                  &lt;div class="clr"&gt;&lt;/div&gt;
  
  
  
          &lt;footer id="footer"&gt;
  
              &lt;div id="footerblurb"&gt;
                  &lt;br&gt;
              &lt;/div&gt;
  
              &lt;div id="footer-inner"&gt;
  
                  &lt;div class="clr"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/footer&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>