DataTables example HTML5 data-* attributes

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.

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
A. Cox Junior Technical Author San Francisco 66 Mon 12th Jan 09 $86,000/y
A. Ramos Chief Executive Officer (CEO) London 47 Fri 9th Oct 09 $1,200,000/y
A. Satou Accountant Tokyo 33 Fri 28th Nov 08 $162,700/y
B. Greer Software Engineer London 41 Sat 13th Oct 12 $132,000/y
B. Nash Software Engineer London 38 Tue 3rd May 11 $163,500/y
B. Wagner Software Engineer San Francisco 28 Tue 7th Jun 11 $206,850/y
B. Williamson Integration Specialist New York 61 Sun 2nd Dec 12 $372,000/y
C. Hurst Javascript Developer San Francisco 39 Tue 15th Sep 09 $205,500/y
C. Kelly Senior Javascript Developer Edinburgh 22 Thu 29th Mar 12 $433,060/y
C. Marshall Regional Director San Francisco 36 Thu 16th Oct 08 $470,600/y
Showing 1 to 10 of 57 entries

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
$(document).ready(function() {
    $('#example').dataTable();
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: