API
THIS MONTH
$58,356
LAST MONTH
$48,356
Add Row
New rows can be added to a DataTable using the
row.add() API method. Simply call the API
function with the data for the new row (be it an array or
object). Multiple rows can be added using the
rows.add() method (note the plural). Data can
likewise be updated with the row().data() and
row().remove() methods. You can refer full
documentation from here
Datatables
| 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 |
Showing 1 to 1 of 1 entries
Individual column searching (select inputs)
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. The helper methods
unique() and sort() are also used
to reduce the data for set input to unique and ordered
elements. Finally the change event from the select input is
used to trigger a column search using the
column().search() method.
| 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 |
Showing 1 to 10 of 57 entries
Individual column searching (text inputs)
DataTables has the ability to apply searching to a specific
column through the column().search() method
(note that the name of the method is search not filter,
since filter() is used to apply a filter to a
result set).
| 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 |
Showing 1 to 10 of 57 entries
Child rows (show extra / detailed information)
The DataTables API has a number of methods 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... | ||||
Showing 0 to 0 of 0 entries
Row selection (multiple rows)
It can be useful to provide the user with the option to
select rows in a DataTable. This can be done by 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 | 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 |
Showing 1 to 10 of 57 entries
Form Inputs
In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which are not needed are not inserted into the document). This increases performance and compatibility, however, it means that submitting forms which span multiple pages requires a little bit of additional work to get the information that is not in the document any longer.
| Name | Age | Position | Office |
|---|---|---|---|
| Airi Satou | |||
| Angelica Ramos | |||
| Ashton Cox | |||
| Bradley Greer | |||
| Brenden Wagner | |||
| Brielle Williamson | |||
| Bruno Nash | |||
| Caesar Vance | |||
| Cara Stevens | |||
| Cedric Kelly | |||
| Name | Age | Position | Office |
Showing 1 to 10 of 57 entries
Row selection and deletion (single row)
This example modifies the multiple row selection example by only allowing the selection of a single row. This is done by checking to see if the row already has a selected class, and if so removing it, but if not then the class is removed from all other rows in the table and then applied to the row being 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 |
Showing 1 to 10 of 57 entries