• Dark Light Default
  • My Account Settings Support Lock Screen Logout
  • Notifications
    Mark all read

    Today

    2 min ago
    UI/UX Design

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type

    1 hour ago
    Message

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500.

    Yesterday

    2 hour ago
    Forms

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type

    12 hour ago
    Challenge invitation

    Jonny aber invites to join the challenge

    5 hour ago
    Security

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type

    Clear all Notifications
What's new announcement?

Today

Big News

2 min ago

Able Pro is Redesigned

Able Pro is completely renowed with high aesthetics User Interface.

img
Check Now
Offer

2 hour ago

Able Pro is in best offer price

Download Able Pro exclusive on themeforest with best price.

img

Yesterday

Blog

12 hour ago

Featured Dashboard Template

Do you know Able Pro is one of the featured dashboard template selected by Themeforest team.?

img
Announcement

12 hour ago

Buy Once - Get Free Updated lifetime

Get the lifetime free updates once you purchase the Able Pro.

img

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
Buy Now
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Theme Contrast

    Choose theme contrast

  • Custom Theme

    Choose your primary theme color

  • Theme layout

    Choose your layout

    img img img img img
  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout