DataTables: Multi-select

Example datatables with multiple select plugin

by Jubal Mabaquiao

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<h4 id="count"><span></span> items selected</h4>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

JavaScript

var json = {
  "data": [{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$320,800",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
  }, {
    "name": "Garrett Winters",
    "position": "Accountant",
    "salary": "$170,750",
    "start_date": "2011/07/25",
    "office": "Tokyo",
    "extn": "8422"
  }, {
    "name": "Ashton Cox",
    "position": "Junior Technical Author",
    "salary": "$86,000",
    "start_date": "2009/01/12",
    "office": "San Francisco",
    "extn": "1562"
  }, {
    "name": "Cedric Kelly",
    "position": "Senior Javascript Developer",
    "salary": "$433,060",
    "start_date": "2012/03/29",
    "office": "Edinburgh",
    "extn": "6224"
  }, {
    "name": "Airi Satou",
    "position": "Accountant",
    "salary": "$162,700",
    "start_date": "2008/11/28",
    "office": "Tokyo",
    "extn": "5407"
  }, {
    "name": "Brielle Williamson",
    "position": "Integration Specialist",
    "salary": "$372,000",
    "start_date": "2012/12/02",
    "office": "New York",
    "extn": "4804"
  }, {
    "name": "Herrod Chandler",
    "position": "Sales Assistant",
    "salary": "$137,500",
    "start_date": "2012/08/06",
    "office": "San Francisco",
    "extn": "9608"
  }, {
    "name": "Rhona Davidson",
    "position": "Integration Specialist",
    "salary": "$327,900",
    "start_date": "2010/10/14",
    "office": "Tokyo",
    "extn": "6200"
  }, {
    "name": "Colleen Hurst",
    "position": "Javascript Developer",
    "salary": "$205,500",
    "start_date": "2009/09/15",
    "office": "San Francisco",
    "extn": "2360"
  }, {
    "name": "Sonya Frost",
    "position": "Software Engineer",
    "salary": "$103,600",
    "start_date": "2008/12/13",
    "office": "Edinburgh",
    "extn": "1667"
  }, {
    "name": "Jena Gaines",
    "position": "Office Manager",
    "salary": "$90,560",
    "start_date": "2008/12/19",
    "office": "London",
    "extn": "3814"
  }, {
    "name": "Quinn...