jQuery Plugin To Enable Multi Rows Selection On Table - Row Selector

File Size: 9.32 KB
Views Total: 5462
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Enable Multi Rows Selection On Table - Row Selector

Row selector is a really small jQuery plugin which enable the multiple rows selection in your html table. Single click to select / deselect individual rows. Shift + Click for multiple rows selection.

How to use it:

1. Put the jquery.rowselector.min.js script after jQuery library, before the closing body tag.

<script src="jquery.min.js"></script>
<script src="jquery.rowselector.min.js"></script>

2. Adding the html5 data-rs-selectable to your table will initialize the plugin automatically.

<table class="table" data-rs-selectable>
  ...
</table

3. More config options via data-* attributes.

  • data-rs-type: (many|one|none) Specify how rows should be selected and unselected.
  • data-rs-class: (defaults to 'selected') Define the CSS class that will be added or removed from rows when selected.

4. An event handler to the table to be notified when rows are clicked.

$('.table').on('clicked.rs.row', function (evt){
  // Now it's safe to check what was selected
  var rows = $(this).selectedrows();
});

This awesome jQuery plugin is developed by scottoffen. For more Advanced Usages, please check the demo page or visit the official website.