Navigation
-
Main
- Dashboard No pending orders
- Layouts
- Themes
- Starter kit
- Changelog 4.0
-
Forms
- Form components
- Text editors
- Pickers
- Form layouts
-
Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
-
Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
-
Data visualization
- Echarts library
- D3 library
- C3 library
- Google charts
- Maps integration
-
Extensions
- Extensions
- File uploaders
- Event calendars
- Internationalization
-
Tables
- Basic tables
- Grid.js tables
- Data tables
- Data tables extensions
-
Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
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 |
---|---|---|---|---|---|
Airi Satou | Accountant | 33 | 2008/11/28 | $162,700 | |
Ashton Cox | Junior Technical Author | 66 | 2009/01/12 | $86,000 | |
Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 | |
Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 | |
Charde Marshall | Regional Director | 36 | 2008/10/16 | $470,600 | |
Colleen Hurst | Javascript Developer | 39 | 2009/09/15 | $405,500 | |
Garrett Winters | Accountant | 63 | 2011/07/25 | $170,750 | |
Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $113,500 | |
Herrod Chandler | Sales Assistant | 59 | 2012/08/06 | $137,500 | |
Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 |
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 |
---|---|---|---|---|---|
Airi Satou | Accountant | 33 | 2008/11/28 | $162,700 | |
Ashton Cox | Junior Technical Author | 66 | 2009/01/12 | $86,000 | |
Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 | |
Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 | |
Charde Marshall | Regional Director | 36 | 2008/10/16 | $470,600 | |
Colleen Hurst | Javascript Developer | 39 | 2009/09/15 | $405,500 | |
Garrett Winters | Accountant | 63 | 2011/07/25 | $170,750 | |
Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $113,500 | |
Herrod Chandler | Sales Assistant | 59 | 2012/08/06 | $137,500 | |
Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 |
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 |
---|---|---|---|---|---|
Airi Satou | Accountant | 33 | 2008/11/28 | $162,700 | |
Ashton Cox | Junior Technical Author | 66 | 2009/01/12 | $86,000 | |
Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 | |
Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 | |
Charde Marshall | Regional Director | 36 | 2008/10/16 | $470,600 | |
Colleen Hurst | Javascript Developer | 39 | 2009/09/15 | $405,500 | |
Garrett Winters | Accountant | 63 | 2011/07/25 | $170,750 | |
Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $113,500 | |
Herrod Chandler | Sales Assistant | 59 | 2012/08/06 | $137,500 | |
Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 |
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 |
---|---|---|---|---|---|
Airi Satou | Accountant | 33 | 2008/11/28 | $162,700 | |
Ashton Cox | Junior Technical Author | 66 | 2009/01/12 | $86,000 | |
Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 | |
Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 | |
Charde Marshall | Regional Director | 36 | 2008/10/16 | $470,600 | |
Colleen Hurst | Javascript Developer | 39 | 2009/09/15 | $405,500 | |
Garrett Winters | Accountant | 63 | 2011/07/25 | $170,750 | |
Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $113,500 | |
Herrod Chandler | Sales Assistant | 59 | 2012/08/06 | $137,500 | |
Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 |
© 2022 Limitless Web App Kit