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
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless