Installation
DataTables.net can be installed via NPM or included from a CDN. For NPM, add
datatables.net
to your
package.json
. During the
Theme Installation
process, the build tools copy the vendor script into
/dist/assets/vendors/datatables-net
. Alternatively, use the CDN links shown in
Require Assets
.
NPM:
npm install datatables.net
CDN:
https://cdn.datatables.net/2.0.8/js/dataTables.min.js
(and optional default CSS if not using Metronic overrides).
Require Assets
To use DataTables.net in your pages, include the DataTables script and ensure the Metronic component styles are loaded. The toolkit's
datatables-net.css
(via
styles.css
) overrides default DataTables styling so tables match the Metronic Tailwind design.
<!DOCTYPE html>
<html>
<head>
<!-- Core styles (includes datatables-net component styling) -->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<table class="display" id="example">
</table>
<!-- Core bundle script -->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!-- jQuery (required by DataTables.net npm build) -->
<script src="/dist/assets/vendors/jquery/jquery.min.js">
</script>
<!-- DataTables.net -->
<script src="/dist/assets/vendors/datatables-net/dataTables.min.js">
</script>
<!-- Your page script -->
<script src="/dist/assets/js/pages/plugins/datatables-net/basic.js">
</script>
</body>
</html>
Customization
Metronic integrates DataTables.net via CSS only. No custom JavaScript wrapper is required—use the official DataTables.net API (
new DataTable(table, options)
) directly. The file
src/css/components/datatables-net.css
is included in the component bundle and overrides the table wrapper, header, body, pagination, search input, and controls using
@layer components
, Metronic CSS variables (e.g.
--border
,
--background
,
--radius-md
), and Tailwind
@apply
. Dark mode is supported through the same variables so tables follow the active theme.
Basic
A basic DataTables.net table with static data. Initialize with
new DataTable(table, options)
; no wrapper required. The table uses the Metronic-styled component from
datatables-net.css
.
| Name | Position | Office | Age | Start date |
|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 |
| Paul Byrd | Chief Financial Officer | New York | 64 | 2010/06/09 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 |
| Yuri Berry | Chief Marketing Officer | New York | 40 | 2009/06/25 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 |
| Angelica Ramos | Chief Executive Officer | London | 47 | 2009/10/09 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-basic');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-basic" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
<td>
2011/04/25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
<td>
2011/07/25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
<td>
2009/01/12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2012/03/29
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
<td>
2008/11/28
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
<td>
2012/12/02
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
<td>
2012/08/06
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
<td>
2010/10/14
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
<td>
2009/09/15
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
<td>
2008/12/13
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
<td>
2008/12/19
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2013/03/03
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
<td>
2008/10/16
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
<td>
2012/12/18
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
<td>
2010/03/17
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
<td>
2012/11/27
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
<td>
2010/06/09
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
<td>
2009/04/10
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
<td>
2012/10/13
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
<td>
2012/09/26
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
<td>
2011/09/03
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
<td>
2009/06/25
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
<td>
2011/12/12
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
<td>
2010/09/20
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
<td>
2009/10/09
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
<td>
2010/12/22
</td>
</tr>
</tbody>
</table>
Pagination
DataTables.net pagination is enabled by default. Use
pageLength
and
lengthMenu
to control rows per page and the length selector.
| Name | Position | Office | Age |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
| Jena Gaines | Office Manager | London | 30 |
| Quinn Flynn | Support Lead | Edinburgh | 22 |
| Charde Marshall | Regional Director | San Francisco | 36 |
| Haley Kennedy | Senior Marketing Designer | London | 43 |
| Tatyana Fitzpatrick | Regional Director | London | 19 |
| Michael Silva | Marketing Designer | London | 66 |
| Paul Byrd | Chief Financial Officer | New York | 64 |
| Gloria Little | Systems Administrator | New York | 59 |
| Bradley Greer | Software Engineer | London | 41 |
| Dai Rios | Personnel Lead | Edinburgh | 35 |
| Jenette Caldwell | Development Lead | New York | 30 |
| Yuri Berry | Chief Marketing Officer | New York | 40 |
| Caesar Vance | Pre-Sales Support | New York | 21 |
| Doris Wilder | Sales Assistant | Sydney | 23 |
| Angelica Ramos | Chief Executive Officer | London | 47 |
| Gavin Joyce | Developer | Edinburgh | 42 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-pagination');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
pageLength: 5,
lengthMenu: [[5, 10, 25], [5, 10, 25]],
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-pagination" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
</tr>
</tbody>
</table>
Search / Filter
The search box filters table rows as you type. Use
search
options to set initial value or disable the search input.
| Name | Position | Office | Age |
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
| Jena Gaines | Office Manager | London | 30 |
| Quinn Flynn | Support Lead | Edinburgh | 22 |
| Charde Marshall | Regional Director | San Francisco | 36 |
| Haley Kennedy | Senior Marketing Designer | London | 43 |
| Tatyana Fitzpatrick | Regional Director | London | 19 |
| Michael Silva | Marketing Designer | London | 66 |
| Paul Byrd | Chief Financial Officer | New York | 64 |
| Gloria Little | Systems Administrator | New York | 59 |
| Bradley Greer | Software Engineer | London | 41 |
| Dai Rios | Personnel Lead | Edinburgh | 35 |
| Jenette Caldwell | Development Lead | New York | 30 |
| Yuri Berry | Chief Marketing Officer | New York | 40 |
| Caesar Vance | Pre-Sales Support | New York | 21 |
| Doris Wilder | Sales Assistant | Sydney | 23 |
| Angelica Ramos | Chief Executive Officer | London | 47 |
| Gavin Joyce | Developer | Edinburgh | 42 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-search');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
searching: true,
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-search" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
</tr>
</tbody>
</table>
Sorting
Click column headers to sort. Use
order
for initial sort and
columns.orderable
to disable sorting on specific columns.
| Name | Position | Office | Age | Start date |
|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 |
| Paul Byrd | Chief Financial Officer | New York | 64 | 2010/06/09 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 |
| Yuri Berry | Chief Marketing Officer | New York | 40 | 2009/06/25 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 |
| Angelica Ramos | Chief Executive Officer | London | 47 | 2009/10/09 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-sorting');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
order: [[2, 'asc'], [3, 'desc']],
columnDefs: [
{ orderable: true, targets: [0, 1, 2, 3, 4] }
],
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-sorting" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
<td>
2011/04/25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
<td>
2011/07/25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
<td>
2009/01/12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2012/03/29
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
<td>
2008/11/28
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
<td>
2012/12/02
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
<td>
2012/08/06
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
<td>
2010/10/14
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
<td>
2009/09/15
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
<td>
2008/12/13
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
<td>
2008/12/19
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2013/03/03
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
<td>
2008/10/16
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
<td>
2012/12/18
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
<td>
2010/03/17
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
<td>
2012/11/27
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
<td>
2010/06/09
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
<td>
2009/04/10
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
<td>
2012/10/13
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
<td>
2012/09/26
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
<td>
2011/09/03
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
<td>
2009/06/25
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
<td>
2011/12/12
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
<td>
2010/09/20
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
<td>
2009/10/09
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
<td>
2010/12/22
</td>
</tr>
</tbody>
</table>
Fixed header
DataTables.net table with a fixed (sticky) header that stays visible when scrolling. Uses the official
datatables.net-fixedheader
plugin and the
fixedHeader: { header: true }
option. The table uses the Metronic-styled component from
datatables-net.css
.
| Name | Position | Office | Age | Start date |
|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 |
| Paul Byrd | Chief Financial Officer | New York | 64 | 2010/06/09 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 |
| Yuri Berry | Chief Marketing Officer | New York | 40 | 2009/06/25 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 |
| Angelica Ramos | Chief Executive Officer | London | 47 | 2009/10/09 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-fixed-header');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
fixedHeader: { header: true, headerOffset: 80 },
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-fixed-header" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
<td>
2011/04/25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
<td>
2011/07/25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
<td>
2009/01/12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2012/03/29
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
<td>
2008/11/28
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
<td>
2012/12/02
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
<td>
2012/08/06
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
<td>
2010/10/14
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
<td>
2009/09/15
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
<td>
2008/12/13
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
<td>
2008/12/19
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2013/03/03
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
<td>
2008/10/16
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
<td>
2012/12/18
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
<td>
2010/03/17
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
<td>
2012/11/27
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
<td>
2010/06/09
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
<td>
2009/04/10
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
<td>
2012/10/13
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
<td>
2012/09/26
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
<td>
2011/09/03
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
<td>
2009/06/25
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
<td>
2011/12/12
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
<td>
2010/09/20
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
<td>
2009/10/09
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
<td>
2010/12/22
</td>
</tr>
</tbody>
</table>
Server-Side Processing
Use
serverSide: true
and
ajax
to let the server handle paging, sorting, and search. The preview uses a mock endpoint; replace the URL with your API and ensure the response format matches
DataTables server-side format
.
| Name | Position | Office | Age |
|---|
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-server-side');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
var mockData = [
{ name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61 },
{ name: 'Garrett Winters', position: 'Accountant', office: 'Tokyo', age: 63 },
{ name: 'Ashton Cox', position: 'Junior Technical Author', office: 'San Francisco', age: 66 },
{ name: 'Cedric Kelly', position: 'Senior Javascript Developer', office: 'Edinburgh', age: 22 },
{ name: 'Airi Satou', position: 'Accountant', office: 'Tokyo', age: 33 },
{ name: 'Brielle Williamson', position: 'Integration Specialist', office: 'New York', age: 61 },
{ name: 'Herrod Chandler', position: 'Sales Assistant', office: 'San Francisco', age: 59 },
{ name: 'Rhona Davidson', position: 'Integration Specialist', office: 'Tokyo', age: 55 },
{ name: 'Colleen Hurst', position: 'Javascript Developer', office: 'San Francisco', age: 39 },
{ name: 'Sonya Frost', position: 'Software Engineer', office: 'Edinburgh', age: 23 },
{ name: 'Jena Gaines', position: 'Office Manager', office: 'London', age: 30 },
{ name: 'Quinn Flynn', position: 'Support Lead', office: 'Edinburgh', age: 22 },
{ name: 'Charde Marshall', position: 'Regional Director', office: 'San Francisco', age: 36 },
{ name: 'Haley Kennedy', position: 'Senior Marketing Designer', office: 'London', age: 43 },
{ name: 'Tatyana Fitzpatrick', position: 'Regional Director', office: 'London', age: 19 },
{ name: 'Michael Silva', position: 'Marketing Designer', office: 'London', age: 66 },
{ name: 'Paul Byrd', position: 'Chief Financial Officer', office: 'New York', age: 64 },
{ name: 'Gloria Little', position: 'Systems Administrator', office: 'New York', age: 59 },
{ name: 'Bradley Greer', position: 'Software Engineer', office: 'London', age: 41 },
{ name: 'Dai Rios', position: 'Personnel Lead', office: 'Edinburgh', age: 35 },
{ name: 'Jenette Caldwell', position: 'Development Lead', office: 'New York', age: 30 },
{ name: 'Yuri Berry', position: 'Chief Marketing Officer', office: 'New York', age: 40 },
{ name: 'Caesar Vance', position: 'Pre-Sales Support', office: 'New York', age: 21 },
{ name: 'Doris Wilder', position: 'Sales Assistant', office: 'Sydney', age: 23 },
{ name: 'Angelica Ramos', position: 'Chief Executive Officer', office: 'London', age: 47 },
{ name: 'Gavin Joyce', position: 'Developer', office: 'Edinburgh', age: 42 }
];
$(table).DataTable({
serverSide: true,
processing: true,
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' },
ajax: function(data, callback) {
var start = data.start;
var length = data.length;
var search = data.search.value.toLowerCase();
var filtered = search
? mockData.filter(function(row) {
return [row.name, row.position, row.office, String(row.age)].some(function(v) {
return String(v).toLowerCase().indexOf(search) >= 0;
});
})
: mockData.slice();
var total = filtered.length;
var orderCol = data.order[0].column;
var orderDir = data.order[0].dir;
var colKeys = ['name', 'position', 'office', 'age'];
filtered.sort(function(a, b) {
var va = a[colKeys[orderCol]];
var vb = b[colKeys[orderCol]];
if (orderDir === 'asc') return va < vb ? -1 : va > vb ? 1 : 0;
return vb < va ? -1 : vb > va ? 1 : 0;
});
var page = filtered.slice(start, start + length);
callback({
draw: data.draw,
recordsTotal: mockData.length,
recordsFiltered: total,
data: page
});
},
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'age' }
]
});
}
});
<table class="display" id="example-server-side" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Scrollable table body (tbody)
DataTables.net table with a fixed-height, vertically scrollable body. Use the
scrollY
option so the table body scrolls within a set height while the header stays visible. The table uses the Metronic-styled component from
datatables-net.css
.
| Name | Position | Office | Age | Start date |
|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 |
| Paul Byrd | Chief Financial Officer | New York | 64 | 2010/06/09 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 |
| Yuri Berry | Chief Marketing Officer | New York | 40 | 2009/06/25 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 |
| Angelica Ramos | Chief Executive Officer | London | 47 | 2009/10/09 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 |
document.addEventListener('DOMContentLoaded', function() {
var table = document.getElementById('example-scrollable-tbody');
if (table && typeof window.$ !== 'undefined' && !$.fn.DataTable.isDataTable(table)) {
$(table).DataTable({
scrollY: '300px',
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' }
});
}
});
<table class="display" id="example-scrollable-tbody" style="width:100%">
<thead>
<tr>
<th>
Name
</th>
<th>
Position
</th>
<th>
Office
</th>
<th>
Age
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
<td>
2011/04/25
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
<td>
2011/07/25
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
<td>
2009/01/12
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2012/03/29
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
<td>
2008/11/28
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
<td>
2012/12/02
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
<td>
2012/08/06
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
<td>
2010/10/14
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
<td>
2009/09/15
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
<td>
2008/12/13
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
<td>
2008/12/19
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
<td>
2013/03/03
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
<td>
2008/10/16
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
<td>
2012/12/18
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
<td>
2010/03/17
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
<td>
2012/11/27
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
<td>
2010/06/09
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
<td>
2009/04/10
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
<td>
2012/10/13
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
<td>
2012/09/26
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
<td>
2011/09/03
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
<td>
2009/06/25
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
<td>
2011/12/12
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
<td>
2010/09/20
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
<td>
2009/10/09
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
<td>
2010/12/22
</td>
</tr>
</tbody>
</table>
Column filter
Each column title has a filter icon; clicking it opens a dropdown with the filter control (Name: select, Office: text, Age: min/max). A single DataTables.net custom search predicate reads those controls and the table redraws on change. Uses jQuery and DataTables.net only.
|
Name
|
Position
|
Office
|
Age
|
|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 |
| Garrett Winters | Accountant | Tokyo | 63 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 |
| Airi Satou | Accountant | Tokyo | 33 |
| Brielle Williamson | Integration Specialist | New York | 61 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 |
| Sonya Frost | Software Engineer | Edinburgh | 23 |
| Jena Gaines | Office Manager | London | 30 |
| Quinn Flynn | Support Lead | Edinburgh | 22 |
| Charde Marshall | Regional Director | San Francisco | 36 |
| Haley Kennedy | Senior Marketing Designer | London | 43 |
| Tatyana Fitzpatrick | Regional Director | London | 19 |
| Michael Silva | Marketing Designer | London | 66 |
| Paul Byrd | Chief Financial Officer | New York | 64 |
| Gloria Little | Systems Administrator | New York | 59 |
| Bradley Greer | Software Engineer | London | 41 |
| Dai Rios | Personnel Lead | Edinburgh | 35 |
| Jenette Caldwell | Development Lead | New York | 30 |
| Yuri Berry | Chief Marketing Officer | New York | 40 |
| Caesar Vance | Pre-Sales Support | New York | 21 |
| Doris Wilder | Sales Assistant | Sydney | 23 |
| Angelica Ramos | Chief Executive Officer | London | 47 |
| Gavin Joyce | Developer | Edinburgh | 42 |
/**
* DataTables.net column filter – dropdown filters per column.
* Data (config) is separate from logic so you can reuse with minimal customization.
*
* Usage:
* DataTablesColumnFilter.setup({ tableSelector: '#my-table', filters: [ ... ] });
*
* Config: tableSelector, dataTableOptions (optional), filters (array of):
* { key, columnIndex, type: 'exact'|'contains'|'range', inputSelectors: ['#id1'[, '#id2']], match?: fn(cellValue, filterValue) }
*
* HTML: .column-filter-toggle with data-column="
<key>
", .column-filter-dropdown with data-dropdown="
<key>
".
*/
(function(global) {
'use strict';
var TOGGLE_CLASS = 'column-filter-toggle';
var DROPDOWN_CLASS = 'column-filter-dropdown';
// --- Filter type handlers (how to read value and match row) ---
var filterTypes = {
exact: {
getValue: function(tableEl, inputSelectors) {
var el = tableEl.querySelector(inputSelectors[0]);
return el ? (el.value || '').trim() : '';
},
match: function(cellValue, filterValue) {
if (!filterValue) return true;
return String(cellValue).trim() === filterValue;
}
},
contains: {
getValue: function(tableEl, inputSelectors) {
var el = tableEl.querySelector(inputSelectors[0]);
return el ? (el.value || '').trim() : '';
},
match: function(cellValue, filterValue) {
if (!filterValue) return true;
return String(cellValue).toLowerCase().indexOf(filterValue.toLowerCase()) !== -1;
}
},
range: {
getValue: function(tableEl, inputSelectors) {
var minEl = tableEl.querySelector(inputSelectors[0]);
var maxEl = tableEl.querySelector(inputSelectors[1]);
var min = minEl && minEl.value !== '' ? parseInt(minEl.value, 10) : null;
var max = maxEl && maxEl.value !== '' ? parseInt(maxEl.value, 10) : null;
return { min: min, max: max };
},
match: function(cellValue, filterValue) {
var num = parseInt(cellValue, 10);
if (isNaN(num)) num = null;
if (filterValue.min != null && (num === null || num < filterValue.min)) return false;
if (filterValue.max != null && (num === null || num > filterValue.max)) return false;
return true;
}
}
};
function getFilterValue(filter, tableEl) {
var type = filterTypes[filter.type];
if (!type) return null;
return type.getValue(tableEl, filter.inputSelectors);
}
function rowMatchesFilter(filter, cellValue, filterValue) {
var type = filterTypes[filter.type];
if (!type) return true;
if (filter.match) return filter.match(cellValue, filterValue);
return type.match(cellValue, filterValue);
}
// --- Dropdown UI (logic only) ---
function closeAllDropdowns(root) {
var el = root || document;
el.querySelectorAll('.' + DROPDOWN_CLASS).forEach(function(d) { d.style.display = 'none'; });
}
function bindDropdownStopPropagation(tableEl) {
tableEl.querySelectorAll('.' + DROPDOWN_CLASS).forEach(function(dropdown) {
dropdown.addEventListener('click', function(e) { e.stopPropagation(); }, false);
dropdown.addEventListener('mousedown', function(e) { e.stopPropagation(); }, false);
});
}
function bindDropdownToggle(tableEl, tableId) {
document.addEventListener('click', function(e) {
var btn = e.target.closest && e.target.closest('.' + TOGGLE_CLASS);
if (btn) {
var table = btn.closest('table');
if (table && table.id === tableId) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
var col = btn.getAttribute('data-column');
var dropdown = table.querySelector('.' + DROPDOWN_CLASS + '[data-dropdown="' + col + '"]');
var isOpen = dropdown && dropdown.style.display !== 'none';
closeAllDropdowns(table);
if (dropdown && !isOpen) dropdown.style.display = '';
}
return;
}
if (!e.target.closest('.' + DROPDOWN_CLASS)) closeAllDropdowns(document);
}, true);
}
// --- DataTables integration ---
function setupColumnFilter(config) {
var tableSelector = config.tableSelector;
var tableEl = typeof tableSelector === 'string'
? document.querySelector(tableSelector)
: (tableSelector && tableSelector.nodeType ? tableSelector : null);
if (!tableEl || typeof global.$ === 'undefined' || !global.$.fn.DataTable || global.$.fn.DataTable.isDataTable(tableEl))
return null;
var tableId = tableEl.id || 'dt-column-filter-' + Math.random().toString(36).slice(2, 9);
if (!tableEl.id) tableEl.id = tableId;
var dataTableOptions = Object.assign({
searching: true,
language: { search: '', searchPlaceholder: 'Search' },
layout: { topStart: [], topEnd: 'search', bottomStart: ['pageLength', 'info'], bottomEnd: 'paging' },
orderCellsTop: true
}, config.dataTableOptions || {});
var table = global.$(tableEl).DataTable(dataTableOptions);
var filters = config.filters || [];
// Single custom search predicate that runs all filters
global.$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
if (settings.nTable.id !== tableId) return true;
for (var i = 0; i < filters.length; i++) {
var f = filters[i];
var colIndex = f.columnIndex;
var cellValue = data[colIndex] != null ? data[colIndex] : '';
var filterValue = getFilterValue(f, tableEl);
if (!rowMatchesFilter(f, cellValue, filterValue)) return false;
}
return true;
});
table.draw();
// UI: dropdown toggle + stop propagation at dropdown container so input/select receive events but th does not trigger sort
bindDropdownStopPropagation(tableEl);
bindDropdownToggle(tableEl, tableId);
// Redraw when any filter input changes
filters.forEach(function(f) {
(f.inputSelectors || []).forEach(function(sel) {
var el = tableEl.querySelector(sel);
if (el) {
el.addEventListener('change', function() { table.draw(); });
el.addEventListener('input', function() { table.draw(); });
}
});
});
return table;
}
// --- Public API ---
global.DataTablesColumnFilter = {
filterTypes: filterTypes,
setup: setupColumnFilter
};
// --- Example init (user replaces this config for their table) ---
var exampleConfig = {
tableSelector: '#example-column-filter',
dataTableOptions: {},
filters: [
{ key: 'name', columnIndex: 0, type: 'exact', inputSelectors: ['#filter-name'] },
{ key: 'position', columnIndex: 1, type: 'exact', inputSelectors: ['#filter-position'] },
{ key: 'office', columnIndex: 2, type: 'contains', inputSelectors: ['#filter-office'] },
{ key: 'age', columnIndex: 3, type: 'range', inputSelectors: ['#filter-age-min', '#filter-age-max'] }
]
};
document.addEventListener('DOMContentLoaded', function() {
setupColumnFilter(exampleConfig);
});
})(typeof window !== 'undefined' ? window : this);
</key>
</key>
<table class="display" id="example-column-filter" style="width:100%">
<thead>
<tr>
<th>
<div class="inline-flex items-center gap-1" style="position:relative">
<span>
Name
</span>
<button aria-label="Filter by name" class="kt-btn kt-btn-icon kt-btn-icon-sm kt-btn-ghost column-filter-toggle" data-column="name" type="button">
<svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
</polygon>
</svg>
</button>
<div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="name" style="display:none">
<select aria-label="Filter by name" class="kt-select w-full" data-kt-select="true" data-kt-select-config='{"optionsClass": "kt-scrollable overflow-auto max-h-[200px]"}' data-kt-select-placeholder="All" id="filter-name">
<option value="">
All
</option>
<option value="Tiger Nixon">
Tiger Nixon
</option>
<option value="Cedric Kelly">
Cedric Kelly
</option>
<option value="Airi Satou">
Airi Satou
</option>
<option value="Angelica Ramos">
Angelica Ramos
</option>
</select>
</div>
</div>
</th>
<th>
<div class="inline-flex items-center gap-1" style="position:relative">
<span>
Position
</span>
<button aria-label="Filter by position" class="kt-btn kt-btn-icon kt-btn-icon-sm kt-btn-ghost column-filter-toggle" data-column="position" type="button">
<svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
</polygon>
</svg>
</button>
<div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="position" style="display:none">
<select aria-label="Filter by position" class="kt-select w-full" data-kt-select="true" data-kt-select-config='{"optionsClass": "kt-scrollable overflow-auto max-h-[200px]"}' data-kt-select-placeholder="All" id="filter-position">
<option value="">
All
</option>
<option value="System Architect">
System Architect
</option>
<option value="Accountant">
Accountant
</option>
<option value="Junior Technical Author">
Junior Technical Author
</option>
<option value="Senior Javascript Developer">
Senior Javascript Developer
</option>
<option value="Integration Specialist">
Integration Specialist
</option>
<option value="Sales Assistant">
Sales Assistant
</option>
<option value="Software Engineer">
Software Engineer
</option>
<option value="Office Manager">
Office Manager
</option>
<option value="Support Lead">
Support Lead
</option>
<option value="Regional Director">
Regional Director
</option>
<option value="Chief Executive Officer">
Chief Executive Officer
</option>
<option value="Developer">
Developer
</option>
</select>
</div>
</div>
</th>
<th>
<div class="inline-flex items-center gap-1" style="position:relative">
<span>
Office
</span>
<button aria-label="Filter by office" class="kt-btn kt-btn-icon kt-btn-icon-sm kt-btn-ghost column-filter-toggle" data-column="office" type="button">
<svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
</polygon>
</svg>
</button>
<div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="office" style="display:none">
<input aria-label="Filter by office" class="form-control form-control-sm w-full min-w-0" id="filter-office" placeholder="Office" type="text"/>
</div>
</div>
</th>
<th>
<div class="inline-flex items-center gap-1" style="position:relative">
<span>
Age
</span>
<button aria-label="Filter by age" class="kt-btn kt-btn-icon kt-btn-icon-sm kt-btn-ghost column-filter-toggle" data-column="age" type="button">
<svg fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3">
</polygon>
</svg>
</button>
<div class="column-filter-dropdown absolute top-full left-0 mt-1 z-10 min-w-[10rem] rounded-lg border border-border bg-background p-2 shadow-md" data-dropdown="age" style="display:none">
<div class="flex gap-2 items-center w-full">
<input aria-label="Age min" class="form-control form-control-sm flex-1 min-w-0" id="filter-age-min" min="0" placeholder="Min" type="number"/>
<input aria-label="Age max" class="form-control form-control-sm flex-1 min-w-0" id="filter-age-max" min="0" placeholder="Max" type="number"/>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Tiger Nixon
</td>
<td>
System Architect
</td>
<td>
Edinburgh
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Garrett Winters
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
63
</td>
</tr>
<tr>
<td>
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Cedric Kelly
</td>
<td>
Senior Javascript Developer
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td>
33
</td>
</tr>
<tr>
<td>
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td>
61
</td>
</tr>
<tr>
<td>
Herrod Chandler
</td>
<td>
Sales Assistant
</td>
<td>
San Francisco
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Rhona Davidson
</td>
<td>
Integration Specialist
</td>
<td>
Tokyo
</td>
<td>
55
</td>
</tr>
<tr>
<td>
Colleen Hurst
</td>
<td>
Javascript Developer
</td>
<td>
San Francisco
</td>
<td>
39
</td>
</tr>
<tr>
<td>
Sonya Frost
</td>
<td>
Software Engineer
</td>
<td>
Edinburgh
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Jena Gaines
</td>
<td>
Office Manager
</td>
<td>
London
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Quinn Flynn
</td>
<td>
Support Lead
</td>
<td>
Edinburgh
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Charde Marshall
</td>
<td>
Regional Director
</td>
<td>
San Francisco
</td>
<td>
36
</td>
</tr>
<tr>
<td>
Haley Kennedy
</td>
<td>
Senior Marketing Designer
</td>
<td>
London
</td>
<td>
43
</td>
</tr>
<tr>
<td>
Tatyana Fitzpatrick
</td>
<td>
Regional Director
</td>
<td>
London
</td>
<td>
19
</td>
</tr>
<tr>
<td>
Michael Silva
</td>
<td>
Marketing Designer
</td>
<td>
London
</td>
<td>
66
</td>
</tr>
<tr>
<td>
Paul Byrd
</td>
<td>
Chief Financial Officer
</td>
<td>
New York
</td>
<td>
64
</td>
</tr>
<tr>
<td>
Gloria Little
</td>
<td>
Systems Administrator
</td>
<td>
New York
</td>
<td>
59
</td>
</tr>
<tr>
<td>
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td>
41
</td>
</tr>
<tr>
<td>
Dai Rios
</td>
<td>
Personnel Lead
</td>
<td>
Edinburgh
</td>
<td>
35
</td>
</tr>
<tr>
<td>
Jenette Caldwell
</td>
<td>
Development Lead
</td>
<td>
New York
</td>
<td>
30
</td>
</tr>
<tr>
<td>
Yuri Berry
</td>
<td>
Chief Marketing Officer
</td>
<td>
New York
</td>
<td>
40
</td>
</tr>
<tr>
<td>
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Doris Wilder
</td>
<td>
Sales Assistant
</td>
<td>
Sydney
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Angelica Ramos
</td>
<td>
Chief Executive Officer
</td>
<td>
London
</td>
<td>
47
</td>
</tr>
<tr>
<td>
Gavin Joyce
</td>
<td>
Developer
</td>
<td>
Edinburgh
</td>
<td>
42
</td>
</tr>
</tbody>
</table>
