Sorting plug-ins

DataTables provides two APIs for sorting information in a table:

  • Type based sorting
  • Custom data source sorting

By far the most commonly used of these two types is "type based sorting" and is the one you are most likely to want to use if just starting out with DataTables.

Type based sorting

The main DataTables package includes sorting functions for strings, dates, numeric and currency data, but you may very well wish to order data in some other manner, for example date formats not built in. The sorting functions below provide a wealth of different sorting methods that can be used with DataTables.

It is also worth noting that sorting function go hand-in-hand with type detection plug-ins, and many of the sorting plug-ins below has a corresponding type detection function to make installation very easy and we strongly recommend taking this approach.

How to use

To add the ability to sort specific data types, using the plug-in functions below, you need to include the plug-in's code in the Javascript available for your page - then if you use a suitable type detection plug-in the new sorting will be applied automatically, you to might need to use the columns.type parameter for the target column if there is no type detection plug-in available.

Browser

Loading a sorting plug-in directly in the browser is just a case of loading the Javascript for the plug-in (after you have loaded the core DataTables Javascript). As an example the code below makes use of the anti-the plug-in saved into a file:

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.antiThe.js"></script>
<script type="text/javascript">
    var table = new DataTable('#myTable', {
        columnDefs: [
            {
                target: 0,
                type: 'anti-the',
            },
        ],
    });
</script>

Plug-ins which can be included in the browser are available on our CDN. See the details page for each plug-in for the full CDN URL.

ES modules

The sorting plug-ins are also available as ES modules, which can be loaded from the datatables.net-plugins package (.mjs files). You need to include the file required for the plug-in. Below we use the example of anti-the again:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/sorting/anti-the.mjs';

var table = new DataTable('#myTable', {
    columnDefs: [
        {
            target: 0,
            type: 'anti-the',
        },
    ],
});

CommonJS

If you are using CommonJS (i.e. in an older version of Node or Webpack), the .js files can be loaded in, and it will automatically add the plug-in to DataTables. As with DataTables core and the extensions, the CommonJS loader provides a function that you need to call with the window and $/jQuery objects - e.g.:

var $ = require('jquery');
var DataTable = require('datatables.net')(window, $);
require('datatables.net-plugins/sorting/anti-the.js')(window, $);

Plug-ins

Custom data source sorting

Custom data source sorting plug-ins allow complete control of the data that is to be sorted. Typically this is used to retrieve data live from the DOM just prior to the table being sorted, to perform sorting on data that can be updated by the end-user or by some other script.

You can also use type based sorting in-combination with custom data source sorting as the data returned by the custom data source sorting plug-in is processed in exactly the same way as automatically retrieved data.

Please note that custom data source sorting plug-ins will often query the DOM for information which can degrade performance. Thus, if it is possible for you to use type based sorting (above) or orthogonal data, it is recommended that you do so.

How to use

To make use of the custom data source sorting plug-ins below, you simply need to include the plug-in's code in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. You also need to specify the columns.orderDataType parameter for the column, to tell it which plug-in function to use.

The example below shows the use of multiple custom data source plug-ins, and also its use in-combination with columns.type (live example):

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.dataSourcePlugins.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable( {
            "columns": [
                null,
                null,
                { "orderDataType": "dom-text" },
                { "orderDataType": "dom-text", "type": "numeric" },
                { "orderDataType": "dom-select" },
                { "orderDataType": "dom-checkbox" }
            ]
        } );
    } );
</script>

Plug-ins

The custom data source functions are used to update the cached data in DataTables, so sorting can occur on columns with user input information.