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 1Column 2Column 3Column 4Column 5
Column 1Column 2Column 3Column 4Column 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.
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612015/04/25$320,800
Garrett WintersAccountantTokyo632015/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662016/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222017/03/29$433,060
Airi SatouAccountantTokyo332019/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612017/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592017/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552018/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392016/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232019/12/13$103,600
Jena GainesOffice ManagerLondon302019/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222020/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362019/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432017/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192018/03/17$385,750
Michael SilvaMarketing DesignerLondon662017/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642018/06/09$725,000
Gloria LittleSystems AdministratorNew York592016/04/10$237,500
Bradley GreerSoftware EngineerLondon412017/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352017/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302015/09/03$345,000
Yuri MantisChief Marketing Officer (CMO)New York402016/06/25$675,000
Caesar VancePre-Sales SupportNew York212015/12/12$106,450
Doris WilderSales AssistantSidney232018/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472016/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422018/12/22$92,575
Jennifer ChangRegional DirectorSingapore282018/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282015/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482018/03/11$850,000
Shou ItouRegional MarketingTokyo202015/08/14$163,000
NamePositionOfficeAgeStart dateSalary
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.
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612015/04/25$320,800
Garrett WintersAccountantTokyo632015/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662016/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222017/03/29$433,060
Airi SatouAccountantTokyo332019/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612017/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592017/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552018/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392016/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232019/12/13$103,600
Jena GainesOffice ManagerLondon302019/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222020/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362019/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432017/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192018/03/17$385,750
Michael SilvaMarketing DesignerLondon662017/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642018/06/09$725,000
Gloria LittleSystems AdministratorNew York592016/04/10$237,500
Bradley GreerSoftware EngineerLondon412017/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352017/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302015/09/03$345,000
Yuri MantisChief Marketing Officer (CMO)New York402016/06/25$675,000
Caesar VancePre-Sales SupportNew York212015/12/12$106,450
Doris WilderSales AssistantSidney232018/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472016/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422018/12/22$92,575
Jennifer ChangRegional DirectorSingapore282018/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282015/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482018/03/11$850,000
Shou ItouRegional MarketingTokyo202015/08/14$163,000
NamePositionOfficeAgeStart dateSalary
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).
NameAgePositionOffice
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
NameAgePositionOffice
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.
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612015/04/25$320,800
Garrett WintersAccountantTokyo632015/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662016/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222017/03/29$433,060
Airi SatouAccountantTokyo332019/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612017/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592017/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552018/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392016/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232019/12/13$103,600
Jena GainesOffice ManagerLondon302019/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222020/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362019/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432017/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192018/03/17$385,750
Michael SilvaMarketing DesignerLondon662017/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642018/06/09$725,000
Gloria LittleSystems AdministratorNew York592016/04/10$237,500
Bradley GreerSoftware EngineerLondon412017/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352017/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302015/09/03$345,000
Yuri MantisChief Marketing Officer (CMO)New York402016/06/25$675,000
Caesar VancePre-Sales SupportNew York212015/12/12$106,450
Doris WilderSales AssistantSidney232018/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472016/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422018/12/22$92,575
Jennifer ChangRegional DirectorSingapore282018/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282015/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482018/03/11$850,000
Shou ItouRegional MarketingTokyo202015/08/14$163,000
NamePositionOfficeAgeStart dateSalary
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.
TargetSearch textTreat as regexUse smart search
Global search
Column - Name
Column - Position
Column - Office
Column - Age
Column - Start date
Column - Salary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612015/04/25$320,800
Garrett WintersAccountantTokyo632015/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662016/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222017/03/29$433,060
Airi SatouAccountantTokyo332019/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612017/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592017/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552018/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392016/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232019/12/13$103,600
Jena GainesOffice ManagerLondon302019/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222020/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362019/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432017/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192018/03/17$385,750
Michael SilvaMarketing DesignerLondon662017/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642018/06/09$725,000
Gloria LittleSystems AdministratorNew York592016/04/10$237,500
Bradley GreerSoftware EngineerLondon412017/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352017/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302015/09/03$345,000
Yuri MantisChief Marketing Officer (CMO)New York402016/06/25$675,000
Caesar VancePre-Sales SupportNew York212015/12/12$106,450
Doris WilderSales AssistantSidney232018/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472016/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422018/12/22$92,575
Jennifer ChangRegional DirectorSingapore282018/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282015/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482018/03/11$850,000
Shou ItouRegional MarketingTokyo202015/08/14$163,000
NamePositionOfficeAgeStart dateSalary
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Header Theme

    Choose Header Theme

  • Accent color

    Choose your primary theme color

  • Sidebar Theme

    Choose Sidebar Theme

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout