DataTables example Ordering plug-ins (no type detection)

Although DataTables will order a number of 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 order data in any manner you wish.

This is done by using the columns.typeDT parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the $.fn.dataTable.ext.type.order object. For more information about 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
$.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( {
        "columnDefs": [ {
            "type": "salary-grade",
            "targets": -1
        } ]
    } );
} );

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