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>
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>
