DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<table id="example" class="display select" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th></th>
        <th>Clicks</th>
        <th>Trading Code</th>
        <th>Product Group</th>
        <th>Product description</th>
      </tr>
    </thead>

    <tbody>
      <tr id="row250200">
        <td></td>
        <td><input id="HS250200" type="checkbox" value="HS 250200" /></td>
        <td> 250200 </td>
        <td> Longs </td>
        <td> Iron Ore - unroasted </td>
      </tr>
      <tr id="row260111">
        <td></td>
        <td><input id="HS260111" type="checkbox" value="HS 260111" /></td>
        <td> 260111 </td>
        <td> Raw Materials - Iron ore </td>
        <td> Iron Ore - fines, concentrate, lump </td>
      </tr>
      <tr id="row730490" class="TypeCarbon_Alloy">
        <td></td>      
        <td><input id="HS730490" type="checkbox" value="HS 730490" /></td>
        <td> 730490 </td>
        <td> Pipe &amp; tube - Seamless </td>
        <td> Seamless tube - other </td>
      </tr>
      <tr id="row730512" class="TypeCarbon_Alloy">
        <td></td>
        <td><input id="HS730512" type="checkbox" value="HS 730512" /></td>
        <td> 730512 </td>
        <td> Longs </td>
        <td> Welded tube - line pipe, LW, >406.4mm </td>
      </tr>
      <tr id="row730230" class="TypeCarbon_Alloy_Stainless">
        <td></td>      
        <td><input id="HS730230" type="checkbox" value="HS 730230" /></td>
        <td> 730230 </td>
        <td> Longs </td>
        <td> Railway Materials </td>
      </tr>
      <tr id="row721921" class="TypeStainless">
        <td></td>      
        <td><input id="HS721921" type="checkbox" value="HS 721921" /></td>
        <td> 721921 </td>
        <td> Flats - HR plate </td>
        <td> HR plate - discrete or CTL, >10mm </td>
      </tr>
   ...

JavaScript

var table = $('#example').DataTable({
   columnDefs: [
     { targets: 0, visible: false }
   ],
   orderFixed: [0, 'desc']
})  

$('#example').on('click', 'input[type="checkbox"]', function() {
   var row =  table.row($(this).closest('tr'));
   table.cell({ row: row.index(), column: 0 } ).data( this.checked ? 1 : 0 )
   row.invalidate().draw()
})