API Datatable
Add rows
New rows can be added to a DataTable very easily using the row.add() API mThis Monthod. 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 the rows.add() mThis Monthod (note the plural). Data can be likewise be updated with the row().data() and row().remove() mThis Monthods.
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
Individual column searching (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.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
| Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
| Name | Position | Office | Age | Start date | Salary |
Individual column searching (select inputs)
This example is almost identical to text based individual column example and provides the same functionality, but in this case using select input controls.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
| Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
| Name | Position | Office | Age | Start date | Salary |
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.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
| Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
| 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 |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
| Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
| Name | Position | Office | Age | Start date | Salary |
Using API in callbacks
There are times when you may wish to call API functions inside the DataTables callback functions (for example initComplete, rowCallback etc). The complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to a variable and then use that variable in the callback. However, all of DataTables' callback functions are executed in the scope of the DataTable instance, so you can use the Javascript special variable this to access the API (this.api() will give an API instance) as this is the table node.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
| Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
| Name | Position | Office | Age | Start date | Salary |