API

DataTables

DataTables is a Javascript HTML table enhancing library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Reference
Add Rows
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
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 provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may wish to present controls that search on specific columns.
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.
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.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2015/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2015/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2016/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2017/03/29 $433,060
Airi Satou Accountant Tokyo 33 2019/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2017/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2017/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2018/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2016/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2019/12/13 $103,600
Jena Gaines Office Manager London 30 2019/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2020/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2019/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2017/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2018/03/17 $385,750
Michael Silva Marketing Designer London 66 2017/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2018/06/09 $725,000
Gloria Little Systems Administrator New York 59 2016/04/10 $237,500
Bradley Greer Software Engineer London 41 2017/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2017/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2015/09/03 $345,000
Yuri Mantis Chief Marketing Officer (CMO) New York 40 2016/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2015/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2018/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2016/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2018/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2018/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2015/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2018/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2015/08/14 $163,000
Name Position Office Age Start date Salary
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.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2015/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2015/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2016/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2017/03/29 $433,060
Airi Satou Accountant Tokyo 33 2019/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2017/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2017/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2018/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2016/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2019/12/13 $103,600
Jena Gaines Office Manager London 30 2019/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2020/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2019/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2017/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2018/03/17 $385,750
Michael Silva Marketing Designer London 66 2017/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2018/06/09 $725,000
Gloria Little Systems Administrator New York 59 2016/04/10 $237,500
Bradley Greer Software Engineer London 41 2017/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2017/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2015/09/03 $345,000
Yuri Mantis Chief Marketing Officer (CMO) New York 40 2016/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2015/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2018/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2016/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2018/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2018/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2015/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2018/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2015/08/14 $163,000
Name Position Office Age Start date Salary
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).
Name Age Position Office
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn
Charde Marshall
Haley Kennedy
Tatyana Fitzpatrick
Michael Silva
Paul Byrd
Gloria Little
Bradley Greer
Dai Rios
Jenette Caldwell
Yuri Mantis
Caesar Vance
Doris Wilder
Angelica Ramos
Gavin Joyce
Name Age Position Office
Show / Hide Columns Dynamically
This example shows how you can make use of the column().visible() API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it enabled with this API method, although it's not required for the API function to work.
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2015/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2015/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2016/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2017/03/29 $433,060
Airi Satou Accountant Tokyo 33 2019/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2017/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2017/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2018/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2016/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2019/12/13 $103,600
Jena Gaines Office Manager London 30 2019/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2020/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2019/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2017/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2018/03/17 $385,750
Michael Silva Marketing Designer London 66 2017/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2018/06/09 $725,000
Gloria Little Systems Administrator New York 59 2016/04/10 $237,500
Bradley Greer Software Engineer London 41 2017/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2017/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2015/09/03 $345,000
Yuri Mantis Chief Marketing Officer (CMO) New York 40 2016/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2015/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2018/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2016/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2018/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2018/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2015/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2018/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2015/08/14 $163,000
Name Position Office Age Start date Salary
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.
Target Search text Treat as regex Use smart search
Global search
Column - Name
Column - Position
Column - Office
Column - Age
Column - Start date
Column - Salary
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2015/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2015/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2016/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2017/03/29 $433,060
Airi Satou Accountant Tokyo 33 2019/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2017/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2017/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2018/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2016/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2019/12/13 $103,600
Jena Gaines Office Manager London 30 2019/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2020/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2019/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2017/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2018/03/17 $385,750
Michael Silva Marketing Designer London 66 2017/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2018/06/09 $725,000
Gloria Little Systems Administrator New York 59 2016/04/10 $237,500
Bradley Greer Software Engineer London 41 2017/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2017/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2015/09/03 $345,000
Yuri Mantis Chief Marketing Officer (CMO) New York 40 2016/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2015/12/12 $106,450
Doris Wilder Sales Assistant Sidney 23 2018/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2016/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2018/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2018/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2015/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2018/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2015/08/14 $163,000
Name Position Office Age Start date Salary
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Sidebar Theme

    Choose Sidebar Theme

  • Accent color

    Choose your primary theme color

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout