META-INF.resources.datatables.sorting.index.html Maven / Gradle / Ivy
Show all versions of jwebmp-data-tables Show documentation
Sorting plug-ins
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.
- How to use type based sorting plug-ins - sorting based on the sType of the column.
- Type based column sorting plug-ins
- How to use custom data source sorting plug-ins - sorting applied to data
supplied by either a plug-in or custom function.
- Custom data source sorting plug-ins
How to use DataTables plug-in sorting functions functions (type based)
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>
Sorting functions (type based column sorting)
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')
How to use custom data source sorting plug-ins
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>
Custom data source sorting
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')