DataTables - Multiple Row Data

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" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Sales Code</th>
      <th>Salesman</th>
      <th>Trade #</th>
      <th>Self Serv. Trade #</th>
      <th>Direct Rev.</th>
      <th>Self Serv. Rev.</th>
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th style="text-align:right"></th>
      <th style="text-align:right"></th>
    </tr>
  </tfoot>
</table>

CSS

body {
  font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  font-weight: 400;
}

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

$(document).ready(function() {
  //Start page loaded

  var table = $('#example').DataTable({
    ajax: {
      url: 'https://api.myjson.com/bins/23i82',
      dataSrc: ""
    },
    destroy: true,
    searching: true,
    paging: true,
    //Column Definitions
    columnDefs: [{
      className: "dt-right",
      "targets": [2, 3, 4, 5]
    }],
    columns: [
    	{data: "AccountManagerID"}, 
      {data: "AccountManagerName"}, 
      {data: "TradeCount"}, 
      {data: "SelfServiceTradeCount"}, 
      {data: "TotalDirectBrokerageValue"}, 
      {data: "TotalSelfServiceBrokerageValue"}
      ],
    "footerCallback": function(row, data, start, end, display) {
      var api = this.api(),
        data;
      var intval = function(i) {
        return typeof i === 'string' ?
          i.replace(/[\$,]/g, '') * 1 :
          typeof i === 'number' ?
          i : 0;
      };
      //Total for Direct Brokerage
      total = api
        .column(4)
        .data()
        .reduce(function(a, b) {
          return intval(a) + intval(b);
        }, 0);
      pageTotal = api
        .column(4, {
          page: 'current'
        })
        .data()
        .reduce(function(a, b) {
          return intval(a) + intval(b);
        }, 0);
      $('tr:eq(0) th:eq(4)', api.table().footer()).html(pageTotal + ' of ' + total);


      //Total for Self Service
      total = api
        .column(5)
        .data()
        .reduce(function(a, b) {
          return intval(a) + intval(b);
        }, 0);
      pageTotal = api
        .column(5, {
          page: 'current'
        })
        .data()
        .reduce(function(a, b) {
          return intval(a) + intval(b);
        }, 0);
      $('tr:eq(0) th:eq(5)', api.table().footer()).html(pageTotal + ' of ' + total);
    }

  });

  //end page loaded
});