Gmail Table Row Selection Checkbox - Download Gmail-style Table Rows Selection With Checkboxes - jQuery Selectr

Download Gmail-style Table Rows Selection With Checkboxes – jQuery Selectr

By Posted on

This time I will share jQuery Plugin and tutorial about Gmail-style Table Rows Selection With Checkboxes – jQuery Selectr, hope it will help you in programming stack.

Gmail Table Row Selection Checkbox - Download Gmail-style Table Rows Selection With Checkboxes - jQuery Selectr
File Size: 32.7 KB
Views Total: 4156
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Selectr is a jQuery plugin that enables you to select/unselect multiple table rows with checkboxes. Inspired by Google Gmail.

When applying this jQuery plugin to a table, a column is appended to each row allowing the user to check or uncheck a certain number of rows by click.

All the ids of the checked rows are stored in a jQuery data object that is easy to access by any jQuery function.

More features:

  • Custom styles for highlighted rows.
  • Right/left positions.
  • Limits the number of checkable rows.
  • Displays a counter for checked rows.
  • Allows to set pre-check rows.
  • Tri-state checkbox.

How to use it:

1. Load the latest version of the jQuery Selectr plugin after jQuery library.

view source
1 <script src="https://code.jquery.com/jquery-1.12.4.min.js"
2         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
3         crossorigin="anonymous">
4 </script>
5 <script src="jquery.selectr.js"></script>

2. Just call the function selectr() on the target HTML table and done.

view source
01 <table id="table-demo">
02   <thead>
03     <tr>
04       <th>Column 1</th>
05       <th>Column 2</th>
06       <th>Column 3</th>
07     </tr>
08   </thead>
09   <tbody>
10     <tr>
11       <td>IV</td>
12       <td>A New Hope</td>
13       <td>25 May 1977</td>
14     </tr>
15     <tr>
16       <td>V</td>
17       <td>The Empire Strikes Back</td>
18       <td>21 May 1980</td>
19     </tr>
20     <tr>
21       <td>VI</td>
22       <td>Return of the Jedi</td>
23       <td>25 May 1983</td>
24     </tr>
25   </tbody>
26 </table>
view source
1 $('#table-demo').selectr();

3. Customize the background color of the checked table row(s).

view source
1 $('#table-demo').selectr({
2   highlight : "highlighted"
3 });
view source
1 .highlighted {
2   /* CSS styles here */
3 }

4. Set the position of the checkboxes.

view source
1 $('#table-demo').selectr({
2   position: "right", // or left
3 });

5. Create a counter to display the count of checked rows. You need to create a tfoot in your HTML table in order to display the counter.

view source
1 $('#table-demo').selectr({
2   count: true
3 });

6. Set the maximum number of table rows to be checkable.

view source
1 $('#table-demo').selectr({
2   checkMax: 5, // 0 = unlimited
3 }, function() {
4   // called when reaching the limit
5 });

7. Set the pre-checked table rows.

view source
1 $('#table-demo').selectr({
2   list: [2,4,5]
3 });

8. More default configuration options.

view source
01 $('#table-demo').selectr({
02   selectr : "selectr",
03   selectrCount : "selectrCount",
04   highlight : "highlighted",
05   count: false,
06   leadingZero: "",
07   checkMax: 0,
08   checkedList : "checkedList",
09   lastChecked: "lastChecked",
10   lastCheckedState: "lastCheckedState",
11   callbackType: "immediate", // immediate - loaded
12   position: "right", // left - right
13   order: "", // by_click
14   list: []
15 });

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

source : jquery.net

Related posts: