API

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

Light / Dark / System

  • Sidebar theme

    Dark / Light

  • Sidebar Caption

    Show / Hide

  • Theme Layout

    LTR/RTL

  • Layout Width

    Full / Fixed

  • Custom Theme

    Choose your primary theme color

  • Header Theme

    Choose your Header theme color

  • Navbar Theme

    Choose your Navbar theme color

  • Logo Theme

    Choose your Logo theme color

  • Navbar Caption Color

    Choose your Navbar Caption Color

  • Navbar Image

    Choose your Navbar Background Image

  • Dropdown Menu Icon

    Choose your Dropdown Menu Icon

  • Dropdown Menu Link Icon

    Choose your Dropdown Menu Link Icon