DataTables example Ordering plug-ins (with type detection)

Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.

Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in development documentation.

This example shows ordering with using an enumerated type.

A wide variety of ready made ordering plug-ins can be found on the DataTables plug-ins page.

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 Low
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 High
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 Low
Bradley Greer Software Engineer London 41 2012/10/13 Low
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 Low
Brielle Williamson Integration Specialist New York 61 2012/12/02 Medium
Bruno Nash Software Engineer London 38 2011/05/03 Low
Caesar Vance Pre-Sales Support New York 21 2011/12/12 Low
Cara Stevens Sales Assistant New York 46 2011/12/06 Low
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 Medium
Showing 1 to 10 of 57 entries

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$.fn.dataTable.ext.type.detect.unshift(
    function ( d ) {
        return d === 'Low' || d === 'Medium' || d === 'High' ?
            'salary-grade' :
            null;
    }
);
 
$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
    switch ( d ) {
        case 'Low':    return 1;
        case 'Medium': return 2;
        case 'High':   return 3;
    }
    return 0;
};
 
 
$(document).ready(function() {
    $('#example').dataTable();
} );

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