@@include('../layouts/component/component-link.html',{
title:'DataTables',
text:'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.',
link:'https://datatables.net/'
})
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.
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
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
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 (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.