Datatable with select-checkbox

Test to set a global select-checkbox in header

by Colin Marks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js)"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<div class="container">
  <table id="example" class="table table-striped" width="100%">
    <thead>
      <tr>
        <th class="select-checkbox"><input id="checkBox" type="checkbox"></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th class="select-checkbox"></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td></td>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td></td>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
       ...

CSS

.tooltip-inner {
  background-color: #696969;
  max-width: 200px;
  width: 200px;
  text-align: justify;
}

.tooltip .arrow:before {
  border-right-color: #696969;
  border-left-color: #696969;
}

.tooltip.show {
  opacity: 1;
}

JavaScript

var table = $('#example').DataTable({
  scrollY: 300,
  scrollCollapse: true,
  paging: true,
  info: true,
  searching: true,
  mark: true,
  select: {
    style: 'os',
    selector: 'td:first-child'
  },
  columnDefs: [{
      targets: 0,
      width: 20,
      orderable: false,
      className: 'select-checkbox'
    },
    {
      targets: 1,
      render: function(data, type, row) {
        return type === 'display' && data.length > 10 ?
          '<span data-toggle="tooltip" data-html="true" data-placement="right" title="' +
          data.replace(/"/g, "&quot;") + '">' +
          data.substr(0, 10) + '...</span>' : data;
      }
    }
  ],
  order: [
    [1, 'desc']
  ]
});

$('#example').on('draw.dt', function() {
  $('[data-toggle="tooltip"]').tooltip();
});

$('#checkBox').on('click', function() {
	if ($('#checkBox').is(':checked')) {
  	table.rows().select();
  }
  else {
  	table.rows().deselect();
  }
});