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
| Case-Sensitive | Sort based on case of data, In ascending order capitals are prioritised over lower case. |
| absolute | Keep one or more items at the top and/or bottom of a table when sorting |
| alt-string | Use the `alt` attribute of an image tag as the data to sort upon. |
| anti-the | Sort with the prefixed word `dt-string The` removed, if present |
| any-number | Sort column with mixed numerical content by number |
| brackets-negative | Detect data of currency type with a leading currency symbol as well at detect two types of negative number formatting |
| chapter | Sort book chapters numerically |
| chinese-string | Sort Chinese characters |
| currency | Sort data numerically when it has a leading currency symbol. |
| czech-string | Sort locale aware sorting for Czech. |
| date-dd-MMM-yyyy | Sort dates in the format `dd-mmm-yyyy` |
| date-de | Sort date / time in the format `dd.mm.YYYY HH:mm` or `dd.mm.YYYY`. |
| date-eu | Sort dates in the format `dd/mm/YY[YY]` (with optional spaces) |
| date-euro | Sort date / time in the format `dd/mm/YYYY hh:ii:ss` |
| date-uk | Sort dates in the format `dd/mm/YY` |
| datetime-luxon | Sort date and time in any format using luxon |
| datetime-moment | Sort date and time in any format using Moment.js |
| diacritics-sort | Better sort of strings containing accented characters (diacritical marks) |
| enum | Dynamically create enum sorting options for a DataTable |
| farsi-numbers | Sorts columns containing UTF8 Farsi numbers |
| file-size | Sort abbreviated file sizes correctly (8MB, 4KB, etc) |
| formatted-numbers | Sort numbers which are displayed with thousand separators |
| intl | Sort string data using the Intl Javascript API |
| ip-address | Sort IP addresses numerically |
| monthYear | This sorting plug-in will sort, in calendar order, data whichis in the format "MM YY".Please note that this plug-in is **deprecated*. The[datetime](//datatables.net/blog/2014-12-18) plug-in provides enhancedfunctionality and flexibility. |
| natural-time-delta | Sort human readable time delta |
| natural | Sort data with a mix of numbers and letters _naturally_. |
| nepali-numbers | Sorts columns containing UTF8 nepali numbers |
| novalue | Sort any "novalue" pattern as max or min (e.g. '-' treat as -1000 or 1000). |
| num-html | Sort data which is a mix of HTML and numeric data. |
| numString | Sorting for number value that is included anywhere in a regex. |
| numeric-comma | Sort numbers correctly which use a comma as the decimal place. |
| percent | Sort numeric data with a postfixed percentage symbol |
| persian-number | Sorts columns containing UTF-8 Persian numbers |
| persian | Sort Persian strings alphabetically |
| scientific | Sort data which is written in exponential notation. |
| signed-num | Sort data numerically with a leading `+` symbol (as well as `-`). |
| stringMonthYear | This sorting plug-in will sort, in calendar order, data whichis in the format "MMM yyyy" or "MMMM yyyy". Inspired by forum discussion:http://datatables.net/forums/discussion/1242/sorting-dates-with-only-month-and-yearPlease note that this plug-in is **deprecated*. The[datetime](//datatables.net/blog/2014-12-18) plug-in provides enhancedfunctionality and flexibility. |
| time-elapsed-dhms | Sort abbreviated time span correctly (2d 3h, 2h 8m, 3m 8s, 30s, etc) |
| time | Sort Times in the formats: `hh:mm, hh:mm:ss, hh:mm tt, hh:mm:ss tt` |
| title-numeric | Sort data numerically based on an attribute on an empty element. |
| title-string | Sort data as a string based on an attribute on an empty element. |
| turkish-string | Sort Turkish characters |
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.
| dom-checkbox | Sort based on the checked state of checkboxes in a column |
| dom-select | Sort based on the value of the `dt-tag select` options in a column |
| dom-text-numeric | Sorting based on the values of `dt-tag input` elements in a column. |
| dom-text | Sorting based on the values of `dt-tag input` elements in a column. |