jQuery Plugin For Multi-Selectable Table Rows - jTableCheckbox
| File Size: | 4.7 KB |
|---|---|
| Views Total: | 7270 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
jTableCheckbox is a jQuery plugin used to turn table rows into checkboxes so that you can select multiple rows at once like using checkboxes.
How to use it:
1. Include jQuery javascript library and the jQuery jTableCheckbox plugin in the html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jQuery.jTableCheckbox.js"></script>
2. Create a standard Html data table. When the table is inside a submitted form, an array of checked values is sent. The values in the array are set by the data-jtable attribute in the first td of each row.
<table class="table table-hover custom">
<thead>
<th>Employee ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</thead>
<tbody>
<tr>
<td data-jtable="6906">6906</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td data-jtable="7538">7538</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td data-jtable="5169">5169</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td data-jtable="1103">1103</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody>
</table>
3. Call the function on the table to initialize the plugin.
<script>
$(document).ready(function(){
$('table').jTableCheckbox();
});
</script>
4. Available options.
<script>
$(document).ready(function(){
$('table').jTableCheckbox({
checkboxName : 'check', //-- the name given to the checkboxes ie name="check[]"
showCheckboxes : false, //-- show the checkboxes or not
showTicks: true, //-- show ticks in the far right column
showTickValue: '✓', //-- value for the ticks default is html tick
showTickHeader: ' ', //-- heading for the ticks column
showTickWidth: 30 //-- width of the column for ticks
});
});
</script>
This awesome jQuery plugin is developed by chris-bradbury. For more Advanced Usages, please check the demo page or visit the official website.











