Add Rows
New rows can be added to a DataTable very easily using the API method: row.add()
. Simply call the API function with the data that is to be used for the new row (be it an array or object). Multiple rows can be added using rows.add()
(note the plural). Data can be likewise be updated with row().data()
and row().remove()
methods.
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
---|---|---|---|---|
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
1.1 | 1.2 | 1.3 | 1.4 | 1.5 |
Individual Column Searching (text/select inputs)
Name | Position | Office | Age | Start Date | Salary |
---|---|---|---|---|---|
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Child Rows (show extra / detailed information)
The DataTables API has a number of methods available for attaching child rows to a parent row in the DataTable. This can be used to show additional information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.
Name | Position | Office | Salary | |
---|---|---|---|---|
Name | Position | Office | Salary | |
Loading... |
Row Selection (multiple rows)
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. rows().data()
can 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 | Office | Age | Start Date | Salary |
---|---|---|---|---|---|
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Name | Position | Office | Age | Start Date | Salary |
Row Selection and Deletion (single row)
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 | Office | Age | Start Date | Salary |
---|---|---|---|---|---|
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Name | Position | Office | Age | Start Date | Salary |
Show / Hide Columns Dynamically
This example shows how you can make use of API method: column().visible()
to dynamically show and hide columns. Also included here is scrolling, just to show it enabled with this API method, although that is not required for the API function to work.
Search API (regular expressions)
Searching a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this interaction. There are APIs for the global search search()
and for each individual column column().search()
. Note also that you must call draw()
after performing the search, in order for the results to be displayed.
Target | Search text | Treat as regex | Use smart search |
---|---|---|---|
Global Search |
|
|
|
Name |
|
|
|
Position |
|
|
|
Office |
|
|
|
Age |
|
|
|
Start Date |
|
|
|
Salary |
|
|
Name | Position | Office | Age | Start Date | Salary |
---|---|---|---|---|---|
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Name | Position | Office | Age | Start Date | Salary |