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>34</td>
      <td>23.23423</td>
      <td>54.63262</td>
    </tr>
    <tr>
      <td>
        <h4>
          BBB
        </h4>
      </td>
      <td>Bar</td>
      <td>2</td>
      <td>132.25234</td>
      <td>12.8921</td>
    </tr>
    <tr>
      <td>
        <h4>
          CCC
        </h4>
      </td>
      <td>Baz</td>
      <td>4</td>
      <td>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 === 'display') {
      var f = $.fn.dataTable.render.number(
         ',', // thousand separator
         '.', // decimal separator
         2, // fixed decimals
         null, // prefix
         '$' // suffix
      ).display;
      data = f(data, type, row, meta);
   }
   
   console.log('value ------>', data);
   return data;
};

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

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