DataTables Checkbox selection

DataTables Checkbox selection

HTML

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td></td>
            </tr> <tr>
                <td><input type="checkbox"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td></td>
            </tr> <tr>
                <td><input type="checkbox"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td></td>
            </tr> <tr>
                <td><input...

CSS

table.dataTable th.selectall-checkbox,
table.dataTable td.selectall-checkbox {
  cursor: pointer;
  outline: none;
  text-align: center;
}

JavaScript

/**
 * DataTables "Checkbox selection": 
 * https://datatables.net/extensions/select/examples/initialisation/checkbox.html
 * DataTable is working with self made css checkboxes.
 * Disadvantages: 
 * 1. Click a couple of times on the "selector" right after each other. For visitors
 * this can be the case if they are making some mistakes and they want to correct the
 * selection immidiately. Result: Not working, because there has to be some time
 * between two clicks. In case of real checkboxes at least you don't have that problem
 * when clicking on the checkbox itself.
 * 2. The DataTables self made css checkbox is working with "text-shadow" in css to
 * create some space around the checkmark, so the checkbox has some kind of
 * opening. The disadvantage of this is that you have to change the color used in
 * "text-shadow" if the background color is changing. The advantage of just using
 * real checkboxes is that you don't have that problem and if users want to style
 * their real checkboxes that's also still possible.
 * 
 * "Checkbox selection" select all:
 * DataTables has a button option for that, but i think it's better to make a
 * cell for that in the "thead". Visitors are not really used to a button for that,
 * so they have to search for it. It also cost you space on the page while you 
 * don't use the space in the thead for the "checkbox selection" column.
 * 
 * With that in mind rewrite the DataTables "Checkbox selection" with the "select all"
 * option.
 * 
 * Initialising: select
 * In this case use "style: 'multi'", because you want to have to ability to select / check
 * more rows.
 * Use also "selector: 'td:first-child'", because you only want to select / check the row
 * if you click on the first td child of the row. Without this you also could click cells
 * in other columns to select / check the row. If you have for example links in your table data
 * you don't wanna select / check a row if you click on the link. You can avoid this with
 *...