DataTables provides two APIs for sorting information in a table: type based sorting and custom data source sorting. They can be used together or independently, and are fully described on the sorting development page. 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.
To add the ability to sort specific data types, using the plug-in functions 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. Then using the sType parameter for that column, set it to the value needed for the plug-in. If sType is not given for a column, DataTables will attempt to detect the type automatically. The following example shows how the numeric comma sorting plug-in (saved to a file) can be used with a DataTable, sorting on the fourth column (live example):
<script type="text/javascript" src="jquery.dataTables.js"></script> <script type="text/javascript" src="dataTables.numericComma.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').dataTable( { "aoColumns": [ null, null, null, { "sType": "numeric-comma" }, null ] } ); } ); </script>
The main DataTables package includes sorting functions for string, date and numeric data, but you may very well wish to order data in some other manner (for example currency, formatting numbers, multi-part data etc). The sorting function pairs below provide a wealth of different sorting methods.
It is also worth noting that sorting function go hand-in-hand with type detection functions, and many of the function pairs below has a corresponding type detection function to make installation very easy.
include(`build.1.inc')Custom data source sorting plug-ins complement type based sorting by adding a method to DataTables to retrieve data live from the DOM just prior to the table being sorted. As such, you can use type based sorting, in-combination with custom data source sorting. This is particularly useful if dealing with DOM information in a table which can change dynamically, such as form inputs, but it can add a little extra overhead to the sorting.
To make use of the 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 sSortDataType 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 it's use in-combination with sType (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( { "aoColumns": [ null, null, { "sSortDataType": "dom-text" }, { "sSortDataType": "dom-text", "sType": "numeric" }, { "sSortDataType": "dom-select" }, { "sSortDataType": "dom-checkbox" } ] } ); } ); </script>
The custom data source functions are used to update the cached data in DataTables, so sorting can occur on columns with user input information.
include(`build.2.inc')