CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatatables
AdrianJG
AdrianJG

Reputation: 53

Datatable with a nested table inside every row

I've been trying to do an HTML document that uses a datatable with every row containing an inside row with an another table detailing more info about the row, but I've been running into issues with the formatting and the functionality of the inside row (it just keeps stuck in the left side with out styling).

/* Formating function for row details */
function fnFormatDetails(oTable, nTr) {
  var aData = oTable.fnGetData(nTr);
  var sOut = '<table>';
  sOut += '<thead> <tr> <th>Factura</th> <th>Fecha</th> <th>Dias</th> <th>Monto</th> <th>Pendiente</th> <th>Vendedor</th> </tr></thead>';
  sOut += '<tbody> <tr> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> <td>Factura</td> </tr> </tbody> ';
  sOut += '</table>';

  return sOut;
}

$(document).ready(function() {
  /*
   * Insert a 'details' column to the table
   */
  var nCloneTh = document.createElement('th');
  var nCloneTd = document.createElement('td');
  nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
  nCloneTd.className = "center";

  $('#example thead tr').each(function() {
    this.insertBefore(nCloneTh, this.childNodes[0]);
  });

  $('#example tbody tr').each(function() {
    this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
  });

  /*
   * Initialse DataTables, with no sorting on the 'details' column
   */
  var oTable = $('#example').dataTable({
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }],
    "aaSorting": [
      [1, 'asc']
    ]
  });

  /* Add event listener for opening and closing details
   * Note that the indicator for showing which row is open is not controlled by DataTables,
   * rather it is done here
   */
  $('#example tbody td img').on('click', function() {
    var nTr = $(this).parents('tr')[0];
    if (oTable.fnIsOpen(nTr)) {
      /* This row is already open - close it */
      this.src = "./resources/details_open.png";
      oTable.fnClose(nTr);
    } else {
      /* Open this row */
      this.src = "./resources/details_close.png";
      oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
    }
  });
});
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;
}
#footer {
  background: #fff;
}
#footer-inner {
  margin: auto;
  text-align: center;
  padding: 12px;
}
#footer a {
  color: blue;
  text-decoration: none;
}
.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 {
  cursor: pointer;
}
div.slider {
  display: none;
}
table.dataTable tbody td.no-padding {
  padding: 0;
}
.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;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
  <title>Consulta de facturas atrasadas</title>
</head>

<body>

  <br>
  <div id="page">
    <header id="header">
      <div id="header-inner">
        <div id="logo">
          <h1></h1>
        </div>

        <div class="clr"></div>
      </div>
    </header>
    <br>


    <table id="example" class="row-border hover order-column display" cellspacing="0" width="90%">
      <thead>
        <tr>

          <th>Codigo</th>
          <th>Nombre</th>
          <th>Propietario</th>
          <th>Direccion</th>
          <th>Ciudad</th>
          <th>Sector</th>
          <th>Cedula</th>
          <th>Tel. 1</th>
          <th>Tel. 2</th>
          <th>Celular</th>

        </tr>
      </thead>
      <tfoot>
        <tr>

          <th>Codigo</th>
          <th>Nombre</th>
          <th>Propietario</th>
          <th>Direccion</th>
          <th>Ciudad</th>
          <th>Sector</th>
          <th>Cedula</th>
          <th>Tel. 1</th>
          <th>Tel. 2</th>
          <th>Celular</th>

        </tr>
      </tfoot>

      <tbody>
        <tr>

          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>

        </tr>
        <tr>

          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>

        </tr>
        <tr>

          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>

        </tr>
        <tr>

          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>

        </tr>
        <tr>

          <td>Codigo</td>
          <td>Nombre</td>
          <td>Propietario</td>
          <td>Direccion</td>
          <td>Ciudad</td>
          <td>Sector</td>
          <td>Cedula</td>
          <td>Tel. 1</td>
          <td>Tel. 2</td>
          <td>Celular</td>

        </tr>
      </tbody>


    </table>





    <div class="clr"></div>

    <div id="footerblurb">
      <br>
    </div>

    <footer id="footer">

      <div id="footer-inner">
        <p></p>
        <div class="clr"></div>
      </div>

    </footer>

  </div>

</body>

</html>

Upvotes: 2

Views: 6024

Answers (1)

Lulylulu
Lulylulu

Reputation: 1264

You should add a class to the inside table when you create the element like insideTable:

function fnFormatDetails(oTable, nTr) {
  var aData = oTable.fnGetData(nTr);
  var sOut = '<table class="insideTable">';
  // ... the other lines
}

And in your css, you can style this inside table:

.insideTable {
  width: 100%;
}

Is this what you were trying to achieve ? Here is a demo plunker.

Edit

After adding the class to the table you can style each element inside like: 

.insideTable tbody {
  text-align: center;
}

Upvotes: 3

Related Questions