Your tables are getting big? You want the users to be able to select more easily the lines? This plugin is ready for you!
Automatic setup
<table class="has-selector">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some title</td>
<td>01/01/1970</td>
</tr>
<tr>
<td>Some other title</td>
<td>21/10/2015</td>
</tr>
</tbody>
</table>
The HTML is pretty simple: you don't need to add anything if don't want to. But you can also add the appropriate columns if needed:
<table class="has-selector">
<thead>
<tr>
<th class="table-selection-col"><input type="checkbox" checked="checked"></th>
<th>Title</th>
<th>Date</th>
<th class="table-options-col"></th>
</tr>
</thead>
<tbody>
<tr>
<th class="table-selection-col"><input type="checkbox" name="posts[]" value="42" checked="checked"></th>
<td>Some title</td>
<td>01/01/1970</td>
<th class="table-options-col"><!-- Some link maybe? --></th>
</tr>
<tr>
<th class="table-selection-col"><input type="checkbox" name="posts[]" value="7" checked="checked"></th>
<td>Some other title</td>
<td>21/10/2015</td>
<th class="table-options-col"><!-- Or whatever you want, really… --></th>
</tr>
</tbody>
</table>
By default the first tab of the container is shown.
Manual setup
The manual setup allows you to customize the behavior of the plugin, but also to apply it on a table that would not be created (or not have the appropriate class
when the JavaScript is executed.
<table id="my-table">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some title</td>
<td>01/01/1970</td>
</tr>
<tr>
<td>Some other title</td>
<td>21/10/2015</td>
</tr>
</tbody>
</table>
var table = document.getElementById('my-table');
var selector = new Admin2.TableSelector(table);
Custom callback
Whenever the list of selected lines changes, the second parameter (a function
) is called:
var table = document.getElementById('my-table');
var selector = new Admin2.TableSelector(table, function () {
if (selector.checked_lines) {
selector.options_all.innerText = selector.checked_lines + '/' + selector.lines.length;
}
else {
selector.options_all.innerText = '';
}
});
The callback showed here is the one used by default.
Here are some of the available properties and what they look like:
{
checked_lines: 1, // An integer that contains the number of selected lines
lines: [ // An array containing all the rows in the table (header not included)
{
elem: HTMLElement, // The <tr> element (will be first in row if created by the plugin)
checkbox: HTMLElement, // The checkbox in this row
checked: true, // A boolean to check of thi sline has been selected
options_col: HTMLElement // The `.table-options-col` cell that contains the options (will be last in row if created by the plugin)
}
/* … */
],
checkbox_all: HTMLElement, // The `.table-selection-col` cell (will be first if created by the plugin) in the header
options_all: HTMLElement, // The `.table-options-col` cell (will be last if created by the plugin) in the header
table: HTMLElement, // The `<table>` passed as first parameter
header: HTMLElement, // The first `<tr>` in the `<thead>`
onSelectionChange: Function // The callback to call when the list of selected lines changes
});