As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-*
attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the
data-*
attributes taking priority).
Please note that the attribute values must contain valid JSON data or a Javascript primitive, as required by jQuery's $().data()
method. This means that double quotes should be used inside the attribute if needed
for a string (see the data-order
in this example).
Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example data-page-length
is
used to represent pageLength
.
The table below shows the use of pageLength
and order
on the main table. Column options can also be defined on the table column cells, as shown by the use of the
columns.orderable
option on
the fifth column below.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Name | Position | Office | Age | Start date | Salary |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
Michelle House | Integration Specialist | Sidney | 37 | 2011/06/02 | $95,400 |
Suki Burks | Developer | London | 53 | 2009/10/22 | $114,500 |
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000 |
Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500 |
Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 |
Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 |
Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 |
Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 |
Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 |
Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 |
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 |
Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 |
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 |
Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 |
Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 |
Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 |
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Hermione Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 |
Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 |
Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 |
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 |
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
T. Nixon | System Architect | Edinburgh | 61 | Mon 25th Apr 11 | $320,800/y |
G. Winters | Accountant | Tokyo | 63 | Mon 25th Jul 11 | $170,750/y |
A. Cox | Junior Technical Author | San Francisco | 66 | Mon 12th Jan 09 | $86,000/y |
C. Kelly | Senior Javascript Developer | Edinburgh | 22 | Thu 29th Mar 12 | $433,060/y |
A. Satou | Accountant | Tokyo | 33 | Fri 28th Nov 08 | $162,700/y |
B. Williamson | Integration Specialist | New York | 61 | Sun 2nd Dec 12 | $372,000/y |
H. Chandler | Sales Assistant | San Francisco | 59 | Mon 6th Aug 12 | $137,500/y |
R. Davidson | Integration Specialist | Tokyo | 55 | Thu 14th Oct 10 | $327,900/y |
C. Hurst | Javascript Developer | San Francisco | 39 | Tue 15th Sep 09 | $205,500/y |
S. Frost | Software Engineer | Edinburgh | 23 | Sat 13th Dec 08 | $103,600/y |
J. Gaines | Office Manager | London | 30 | Fri 19th Dec 08 | $90,560/y |
Q. Flynn | Support Lead | Edinburgh | 22 | Sun 3rd Mar 13 | $342,000/y |
C. Marshall | Regional Director | San Francisco | 36 | Thu 16th Oct 08 | $470,600/y |
H. Kennedy | Senior Marketing Designer | London | 43 | Tue 18th Dec 12 | $313,500/y |
T. Fitzpatrick | Regional Director | London | 19 | Wed 17th Mar 10 | $385,750/y |
M. Silva | Marketing Designer | London | 66 | Tue 27th Nov 12 | $198,500/y |
P. Byrd | Chief Financial Officer (CFO) | New York | 64 | Wed 9th Jun 10 | $725,000/y |
G. Little | Systems Administrator | New York | 59 | Fri 10th Apr 09 | $237,500/y |
B. Greer | Software Engineer | London | 41 | Sat 13th Oct 12 | $132,000/y |
D. Rios | Personnel Lead | Edinburgh | 35 | Wed 26th Sep 12 | $217,500/y |
J. Caldwell | Development Lead | New York | 30 | Sat 3rd Sep 11 | $345,000/y |
Y. Berry | Chief Marketing Officer (CMO) | New York | 40 | Thu 25th Jun 09 | $675,000/y |
C. Vance | Pre-Sales Support | New York | 21 | Mon 12th Dec 11 | $106,450/y |
D. Wilder | Sales Assistant | Sydney | 23 | Mon 20th Sep 10 | $85,600/y |
A. Ramos | Chief Executive Officer (CEO) | London | 47 | Fri 9th Oct 09 | $1,200,000/y |
G. Joyce | Developer | Edinburgh | 42 | Wed 22nd Dec 10 | $92,575/y |
J. Chang | Regional Director | Singapore | 28 | Sun 14th Nov 10 | $357,650/y |
B. Wagner | Software Engineer | San Francisco | 28 | Tue 7th Jun 11 | $206,850/y |
F. Green | Chief Operating Officer (COO) | San Francisco | 48 | Thu 11th Mar 10 | $850,000/y |
S. Itou | Regional Marketing | Tokyo | 20 | Sun 14th Aug 11 | $163,000/y |
M. House | Integration Specialist | Sydney | 37 | Thu 2nd Jun 11 | $95,400/y |
S. Burks | Developer | London | 53 | Thu 22nd Oct 09 | $114,500/y |
P. Bartlett | Technical Author | London | 27 | Sat 7th May 11 | $145,000/y |
G. Cortez | Team Leader | San Francisco | 22 | Sun 26th Oct 08 | $235,500/y |
M. Mccray | Post-Sales support | Edinburgh | 46 | Wed 9th Mar 11 | $324,050/y |
U. Butler | Marketing Designer | San Francisco | 47 | Wed 9th Dec 09 | $85,675/y |
H. Hatfield | Office Manager | San Francisco | 51 | Tue 16th Dec 08 | $164,500/y |
H. Fuentes | Secretary | San Francisco | 41 | Fri 12th Feb 10 | $109,850/y |
V. Harrell | Financial Controller | San Francisco | 62 | Sat 14th Feb 09 | $452,500/y |
T. Mooney | Office Manager | London | 37 | Thu 11th Dec 08 | $136,200/y |
J. Bradshaw | Director | New York | 65 | Fri 26th Sep 08 | $645,750/y |
O. Liang | Support Engineer | Singapore | 64 | Thu 3rd Feb 11 | $234,500/y |
B. Nash | Software Engineer | London | 38 | Tue 3rd May 11 | $163,500/y |
S. Yamamoto | Support Engineer | Tokyo | 37 | Wed 19th Aug 09 | $139,575/y |
T. Walton | Developer | New York | 61 | Sun 11th Aug 13 | $98,540/y |
F. Camacho | Support Engineer | San Francisco | 47 | Tue 7th Jul 09 | $87,500/y |
S. Baldwin | Data Coordinator | Singapore | 64 | Mon 9th Apr 12 | $138,575/y |
Z. Frank | Software Engineer | New York | 63 | Mon 4th Jan 10 | $125,250/y |
Z. Serrano | Software Engineer | San Francisco | 56 | Fri 1st Jun 12 | $115,000/y |
J. Acosta | Junior Javascript Developer | Edinburgh | 43 | Fri 1st Feb 13 | $75,650/y |
C. Stevens | Sales Assistant | New York | 46 | Tue 6th Dec 11 | $145,600/y |
H. Butler | Regional Director | London | 47 | Mon 21st Mar 11 | $356,250/y |
L. Greer | Systems Administrator | London | 21 | Fri 27th Feb 09 | $103,500/y |
J. Alexander | Developer | San Francisco | 30 | Wed 14th Jul 10 | $86,500/y |
S. Decker | Regional Director | Edinburgh | 51 | Thu 13th Nov 08 | $183,000/y |
M. Bruce | Javascript Developer | Singapore | 29 | Mon 27th Jun 11 | $183,000/y |
D. Snider | Customer Support | New York | 27 | Tue 25th Jan 11 | $112,000/y |
Name | Position | Office | Age | Start date | Salary |
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').DataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.