jQuery DataTables – Row selection using checkboxes

Example for article at http://www.gyrocode.com/articles/jquery-datatables-checkboxes/

by Shrikrishna Gupta

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<h3><a href="http://www.gyrocode.com/articles/jquery-datatables-checkboxes/">jQuery DataTables – Row selection using checkboxes</a></h3>
<a href="http://www.gyrocode.com/articles/jquery-datatables-checkboxes/">See full article on Gyrocode.com</a>
<hr>
<br>

<form id="frm-example" action="/path/to/your/script" method="POST">

  <table id="example" class="display select" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>
          <input name="select_all" value="1" type="checkbox">
        </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>

  <p>Press <b>Submit</b> and check console for URL-encoded form data that would be submitted.</p>

  <p>
    <button>Submit</button>
  </p>

  <b>Data submitted to the server:</b>
  <br>
  <pre id="example-console">
</pre>
</form>

CSS

table.dataTable.select tbody tr,
table.dataTable thead th:first-child {
  cursor: pointer;
}

JavaScript

//
// Updates "Select all" control in a data table
//
function updateDataTableSelectAllCtrl(table) {
  var $table = table.table().node();
  var $chkbox_all = $('tbody input[type="checkbox"]', $table);
  var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
  var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);

  // If none of the checkboxes are checked
  if ($chkbox_checked.length === 0) {
    chkbox_select_all.checked = false;
    if ('indeterminate' in chkbox_select_all) {
      chkbox_select_all.indeterminate = false;
    }

    // If all of the checkboxes are checked
  } else if ($chkbox_checked.length === $chkbox_all.length) {
    chkbox_select_all.checked = true;
    if ('indeterminate' in chkbox_select_all) {
      chkbox_select_all.indeterminate = false;
    }

    // If some of the checkboxes are checked
  } else {
    chkbox_select_all.checked = true;
    if ('indeterminate' in chkbox_select_all) {
      chkbox_select_all.indeterminate = true;
    }
  }
}

$(document).ready(function() {
  // Array holding selected row IDs
  var rows_selected = [];
  var table = $('#example').DataTable({
    'ajax': 'https://api.myjson.com/bins/1us28',
    'columnDefs': [{
      'targets': 0,
      'searchable': false,
      'orderable': false,
      'width': '1%',
      'className': 'dt-body-center',
      'render': function(data, type, full, meta) {
        return '<input type="checkbox">';
      }
    }],
    'order': [1, 'asc'],
    'rowCallback': function(row, data, dataIndex) {
      // Get row ID
      var rowId = data[0];

      // If row ID is in the list of selected row IDs
      if ($.inArray(rowId, rows_selected) !== -1) {
        $(row).find('input[type="checkbox"]').prop('checked', true);
        $(row).addClass('selected');
      }
    }
  });

  // Handle click on checkbox
  $('#example tbody').on('click', 'input[type="checkbox"]', function(e) {
    var $row = $(this).closest('tr');

    // Get row data
    var...