HTML5 data-* attributes - table options

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
  • Javascript
  • HTML
  • CSS
  • Ajax
  • Server-side script
  • Comments

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.

Other examples