DataTables example HTML5 data-* attributes - cell data

DataTables can use different data for different actions (display, ordering and searching) which can be immensely powerful for transforming data in the display to be intuitive for the end user, while using different, or more complex data, for other actions. For example, if a table contains a formatted telephone number in the format xxx-xxxx, intuitively a user might search for the number but without a dash. Using orthogonal data for searching allows both forms of the telephone number to be used, while only the nicely formatted number is displayed in the table.

One method in which DataTables can obtain this orthogonal data for its different actions is through custom HTML5 data attributes. DataTables will automatically detect four different attributes on the HTML elements:

  • data-sort or data-order - for ordering data
  • data-filter or data-search - for search data

This example shows the use of data-sort and data-filter attributes. In this case the first column has been formatted so the first name has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it (/y) the column will correctly order numerically as the data-sort / data-order attribute is set on the column with plain numeric data.

Name Position Office Age Start date Salary
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 Sidney 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 Sidney 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

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.