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 |
---|---|---|---|---|---|
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 | |
Name | Position | Age | Start date | Salary |
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 |
---|---|---|---|---|---|
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 | |
Name | Position | Age | Start date | Salary |