jQuery DataTables Checkboxes: iCheck

Example for https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

by gyrocode

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.12/se-1.2.0/datatables.min.css">
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.7/css/dataTables.checkboxes.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/se-1.2.0/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.7/js/dataTables.checkboxes.min.js"></script>
<div class="container-fluid">

<h3><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes:</a> <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/styling/icheck/">iCheck</a></h3>
    
<table id="example" class="display" width="100%" cellspacing="0">
   <thead>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Extn.</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th></th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Extn.</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>

<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/styling/icheck/">See full article on Gyrocode.com</a>

</div>

JavaScript

$(document).ready(function (){
   var table = $('#example').DataTable({
      'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
      'drawCallback': function(){
         $('input[type="checkbox"]').iCheck({
            checkboxClass: 'icheckbox_flat-blue'
         });
      },
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true,
               'selectCallback': function(nodes, selected){
                  $('input[type="checkbox"]', nodes).iCheck('update');
               },
               'selectAllCallback': function(nodes, selected, indeterminate){
                  $('input[type="checkbox"]', nodes).iCheck('update');
               }
            }
         }
      ],
      'select': 'multi',
      'order': [[1, 'asc']]
   });

   // Handle iCheck change event for "select all" control
   $(table.table().container()).on('ifChanged', '.dt-checkboxes-select-all input[type="checkbox"]', function(event){
      var col = table.column($(this).closest('th'), { filter: 'applied' });
      col.checkboxes.select(this.checked);
   });

   // Handle iCheck change event for checkboxes in table body
   $(table.table().container()).on('ifChanged', '.dt-checkboxes', function(event){
      var cell = table.cell($(this).closest('td'));
      cell.checkboxes.select(this.checked);
   });
});