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-sort="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-sort="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-sort="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') {
    return data;
  }
  if (meta.col > 2) {
    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;
  }
  return data;
};

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

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