DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

<table id="table">
  <thead>
    <tr>
      <th>col 0</th>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
      <th>col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <h4>
          AAA
        </h4>
      </td>
      <td>Foo</td>
      <td data-sort="34">34</td>
      <td data-sort2="23.23423">23.23423</td>
      <td>54.63262</td>
    </tr>
    <tr>
      <td>
        <h4>
          BBB
        </h4>
      </td>
      <td>Bar</td>
      <td data-sort="2">2</td>
      <td data-sort2="132.25234">132.25234</td>
      <td>12.8921</td>
    </tr>
    <tr>
      <td>
        <h4>
          CCC
        </h4>
      </td>
      <td>Baz</td>
      <td data-sort="4">4</td>
      <td data-sort2="3.1541">3.1541</td>
      <td>546.253234</td>
    </tr>
  </tbody>
</table>

JavaScript

function numbersRenderer(data, type, row, meta) {
   console.log('data --->', data);
   console.log('type --->', type);
   
   if (type === 'sort' || type === 'type') {
      var api = new $.fn.dataTable.Api(meta.settings);
      var $td = $(api.cell({row: meta.row, column: meta.col}).node());
      var sortData = $td.data('sort2');
      return (typeof sortData !== 'undefined') ? sortData : data;
   }

   var f = $.fn.dataTable.render.number(
      ',', // thousand separator
      '.', // decimal separator
      2, // fixed decimals
      null, // prefix
      '$' // suffix
   ).display;
   var value = f(data, type, row, meta);
   console.log('value ------>', value);
   return value;
};

var s = {
   order: [
      [3, 'desc']
   ],
   columnDefs: [{
      targets: [2, 3, 4],
      render: numbersRenderer
   }]
}

var table = $('#table').dataTable(s);