DataTables - Child rows

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
      <th>Extn.</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
      <th>Extn.</th>
    </tr>
  </tfoot>
</table>

CSS

td.details-control {
  background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.details-control {
  background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

/* Formatting function for row details - modify as you need */
function format(d) {
  // `d` is the original data object for the row
  return '<div class="slider">' +
    '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr>' +
    '<td>Full name:</td>' +
    '<td>' + d.name + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Extension number:</td>' +
    '<td>' + d.extn + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Extra info:</td>' +
    '<td>And any further details here (images etc)...</td>' +
    '</tr>' +
    '</table>' +
    '</div>';
}

$(document).ready(function() {
  var table = $('#example').DataTable({
    "ajax": 'https://api.myjson.com/bins/16lp6',
    scrollY: 250,
    deferRender: true,
    scroller: true,
    "columns": [{
      "class": 'details-control',
      "orderable": false,
      "data": null,
      "defaultContent": ''
    }, {
      "data": "name"
    }, {
      "data": "position"
    }, {
      "data": "office"
    }, {
      "data": "salary"
    }, {
      "data": "extn",
      "visible": false
    }],
    "order": [
      [1, 'asc']
    ],
    "footerCallback": function(row, data, start, end, display) {
      var api = this.api(),
        data;

      // Remove the formatting to get integer data for summation
      var intVal = function(i) {
        return typeof i === 'string' ?
          i.replace(/[\$,]/g, '') * 1 :
          typeof i === 'number' ?
          i : 0;
      };

      // Total over all pages
      total = api
        .column(4)
        .data()
        .reduce(function(a, b) {
          return intVal(a) + intVal(b);
        }, 0);

      // Total over this page
      pageTotal = api
        .column(4, {
          page: 'current'
        })
        .data()
        .reduce(function(a, b) {
          return intVal(a) + intVal(b);
        }, 0);

      // Update footer
      $(api.column(4).footer()).html(
        '$' + pageTotal + ' ( $' + total + ' total)');
    }
  });

  // Add event...