jQuery.selectr Demos v 1.0
The basic use .
$("table").selectr();
| N° | Movie | Date |
|---|---|---|
| IV | A New Hope | 25 May 1977 |
| V | The Empire Strikes Back | 21 May 1980 |
| VI | Return of the Jedi | 25 May 1983 |
| I | The Phantom Menace | 19 May 1999 |
| II | Attack of the Clones | 16 May 2002 |
| III | Revenge of the Sith | 19 May 2005 |
Changing class for highlighted rows
You can define the css class to be applied to the selected rows so that you can have specific styles for your different tables.
$("#tableId").selectr({highlight: "classname"});
| N° | Movie | Date |
|---|---|---|
| IV | A New Hope | 25 May 1977 |
| V | The Empire Strikes Back | 21 May 1980 |
| VI | Return of the Jedi | 25 May 1983 |
| I | The Phantom Menace | 19 May 1999 |
| II | Attack of the Clones | 16 May 2002 |
| III | Revenge of the Sith | 19 May 2005 |
Right/left position
You can define the css class to be applied to the selected rows so that you can have specific styles for your different tables.
$("#tableId").selectr({position: "right"/"left"});
| N° | Movie | Date |
|---|---|---|
| IV | A New Hope | 25 May 1977 |
| V | The Empire Strikes Back | 21 May 1980 |
| VI | Return of the Jedi | 25 May 1983 |
| I | The Phantom Menace | 19 May 1999 |
| II | Attack of the Clones | 16 May 2002 |
| III | Revenge of the Sith | 19 May 2005 |
Setting a counter
On big tables it might be useful to display the count of checked rows, this is done via the count option. You will need however to create a tfoot in your table in order to display the counter.
$("#tableId").selectr({count: true/false});
| N° | Movie | Date |
|---|---|---|
| IV | A New Hope | 25 May 1977 |
| V | The Empire Strikes Back | 21 May 1980 |
| VI | Return of the Jedi | 25 May 1983 |
| I | The Phantom Menace | 19 May 1999 |
| II | Attack of the Clones | 16 May 2002 |
| III | Revenge of the Sith | 19 May 2005 |
Setting a maximum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
$("table").selectr({checkMax: 2});
| N° | Movie | Date |
|---|---|---|
| IV | A New Hope | 25 May 1977 |
| V | The Empire Strikes Back | 21 May 1980 |
| VI | Return of the Jedi | 25 May 1983 |
| I | The Phantom Menace | 19 May 1999 |
| II | Attack of the Clones | 16 May 2002 |
| III | Revenge of the Sith | 19 May 2005 |
Providing a callback function
You can provide a callback function to be run on each click on the checkboxes or when the maximum number of checked checkboxes is reached. The second mode requires a value for checkMax.
$('#tableId').selectr({checkMax: 3}, function() {// here goes the code of your callback function});
| N° | Movie | Date |
|---|---|---|
| IV | A New Hope | 25 May 1977 |
| V | The Empire Strikes Back | 21 May 1980 |
| VI | Return of the Jedi | 25 May 1983 |
| I | The Phantom Menace | 19 May 1999 |
| II | Attack of the Clones | 16 May 2002 |
| III | Revenge of the Sith | 19 May 2005 |
List of checked rows:
Pre-checking radioboxes
You can provide a callback function to be run on each click on the checkboxes or when the maximum number of checked checkboxes is reached. The second mode requires a value for checkMax.
$('#tableId').selectr({list: [2,4,5]});
| N° | Movie | Date |
|---|---|---|
| IV | A New Hope | 25 May 1977 |
| V | The Empire Strikes Back | 21 May 1980 |
| VI | Return of the Jedi | 25 May 1983 |
| I | The Phantom Menace | 19 May 1999 |
| II | Attack of the Clones | 16 May 2002 |
| III | Revenge of the Sith | 19 May 2005 |