Single row selection
This example shows a modification of the multiple row
selection example, where just a
single can now be selected. This is done simply by
checking to see if the row already has a selected class or not,
and if so removing it, if not then the class is removed from any
other row in the table which does have it and applied to the row
to be selected.
| Name | Position | Age | Start date | Salary | Actions |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | 61 | 2011/04/25 | $320,800 | |
| Garrett Winters | Accountant | 63 | 2011/07/25 | $170,750 | |
| Ashton Cox | Junior Technical Author | 66 | 2009/01/12 | $86,000 | |
| Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 | |
| Airi Satou | Accountant | 33 | 2008/11/28 | $162,700 | |
| Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 | |
| Herrod Chandler | Sales Assistant | 59 | 2012/08/06 | $137,500 | |
| Rhona Davidson | Integration Specialist | 55 | 2010/10/14 | $97,900 | |
| Colleen Hurst | Javascript Developer | 39 | 2009/09/15 | $405,500 | |
| Sonya Frost | Software Engineer | 23 | 2008/12/13 | $103,600 | |
| Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 | |
| Quinn Flynn | Support Lead | 22 | 2013/03/03 | $342,000 | |
| Charde Marshall | Regional Director | 36 | 2008/10/16 | $470,600 | |
| Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $113,500 | |
| Tatyana Fitzpatrick | Regional Director | 19 | 2010/03/17 | $385,750 |
Multiple rows selection
It can be quite useful at times to provide the user with the
option to select rows in a DataTable. This can be done by simply
using a
click event to add/remove a class on the
table rows. The rows().data() method can then be
used to get the data for the selected rows. In this case it is
simply counting the number of selected rows, but much more
complex interactions can easily be developed.
| Name | Position | Age | Start date | Salary | Actions |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | 61 | 2011/04/25 | $320,800 | |
| Garrett Winters | Accountant | 63 | 2011/07/25 | $170,750 | |
| Ashton Cox | Junior Technical Author | 66 | 2009/01/12 | $86,000 | |
| Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 | |
| Airi Satou | Accountant | 33 | 2008/11/28 | $162,700 | |
| Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 | |
| Herrod Chandler | Sales Assistant | 59 | 2012/08/06 | $137,500 | |
| Rhona Davidson | Integration Specialist | 55 | 2010/10/14 | $97,900 | |
| Colleen Hurst | Javascript Developer | 39 | 2009/09/15 | $405,500 | |
| Sonya Frost | Software Engineer | 23 | 2008/12/13 | $103,600 | |
| Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 | |
| Quinn Flynn | Support Lead | 22 | 2013/03/03 | $342,000 | |
| Charde Marshall | Regional Director | 36 | 2008/10/16 | $470,600 | |
| Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $113,500 | |
| Tatyana Fitzpatrick | Regional Director | 19 | 2010/03/17 | $385,750 |
Individual column searching
Individual columns searching with
text inputs. The
searching functionality that is provided by DataTables is very
useful for quickly search through the information in the table -
however the search is global, and you may wish to present
controls to search on specific columns only. This examples shows
text elements being used with the
column().search() method to add input controls in
the footer of the table for each column.
| Name | Position | Age | Start date | Salary | Actions |
|---|---|---|---|---|---|
| Name | Position | Age | Start date | Salary | |
| Tiger Nixon | System Architect | 61 | 2011/04/25 | $320,800 | |
| Garrett Winters | Accountant | 63 | 2011/07/25 | $170,750 | |
| Ashton Cox | Junior Technical Author | 66 | 2009/01/12 | $86,000 | |
| Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 | |
| Airi Satou | Accountant | 33 | 2008/11/28 | $162,700 | |
| Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 | |
| Herrod Chandler | Sales Assistant | 59 | 2012/08/06 | $137,500 | |
| Rhona Davidson | Integration Specialist | 55 | 2010/10/14 | $97,900 | |
| Colleen Hurst | Javascript Developer | 39 | 2009/09/15 | $405,500 | |
| Sonya Frost | Software Engineer | 23 | 2008/12/13 | $103,600 | |
| Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 | |
| Quinn Flynn | Support Lead | 22 | 2013/03/03 | $342,000 | |
| Charde Marshall | Regional Director | 36 | 2008/10/16 | $470,600 | |
| Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $113,500 | |
| Tatyana Fitzpatrick | Regional Director | 19 | 2010/03/17 | $385,750 |
Individual column searching
Individual columns searching with
selects. This
example is almost identical to text based individual column
example and provides the same functionality, but in this case
using select input controls. After the table is
initialised, the API is used to build the select inputs through
the use of the column().data() method to get the
data for each column in turn.
| Name | Position | Age | Start date | Salary | Actions |
|---|---|---|---|---|---|
| Name | Position | Age | Start date | Salary | |
| Tiger Nixon | System Architect | 61 | 2011/04/25 | $320,800 | |
| Garrett Winters | Accountant | 63 | 2011/07/25 | $170,750 | |
| Ashton Cox | Junior Technical Author | 66 | 2009/01/12 | $86,000 | |
| Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 | |
| Airi Satou | Accountant | 33 | 2008/11/28 | $162,700 | |
| Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 | |
| Herrod Chandler | Sales Assistant | 59 | 2012/08/06 | $137,500 | |
| Rhona Davidson | Integration Specialist | 55 | 2010/10/14 | $97,900 | |
| Colleen Hurst | Javascript Developer | 39 | 2009/09/15 | $405,500 | |
| Sonya Frost | Software Engineer | 23 | 2008/12/13 | $103,600 | |
| Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 | |
| Quinn Flynn | Support Lead | 22 | 2013/03/03 | $342,000 | |
| Charde Marshall | Regional Director | 36 | 2008/10/16 | $470,600 | |
| Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $113,500 | |
| Tatyana Fitzpatrick | Regional Director | 19 | 2010/03/17 | $385,750 |