DataTables are a brilliant plugin for JQuery that restyle and add functionality to your tables. They add searching, pagination and sorting right out of the box with very little configuration needed – unfortunately the sorting doesn’t support the UK date format so you need to add your own sorting methods – basic ones are supplied by the site itself but I have added a couple of tweaks to handle blank dates.
I simply create a separate javascript file that I load after the main datatables javascript. The datatables require you define three functions for a new method of sorting.
- Type detection – jQuery.fn.dataTableExt.aTypes.unshift
- Sort Ascending – jQuery.fn.dataTableExt.oSort[‘type-asc’]
- Sort Descending – jQuery.fn.dataTableExt.oSort[‘type-desc’]
I place all of these in the new javascript file. Instructions and example functions can be found on the datatables site, one page for the type detection and one for the [sorting functions][2]. The below functions are based on the code found here.
The Type detection function simply defines a way of checking for the type of sort you want, in this example that is done using a regular expression and when UK style dates are found it names then as “uk_date”.
The sorting functions use this name “uk_date” and provide simple functions for comparing one date against another. My addition here is to check for dates that contain both / and – delimiters and for blank dates. The functions simply return -1, 0 or 1 like most compare functions. The code for this is below, hope it helps somebody out.
// type detection - UK date
jQuery.fn.dataTableExt.aTypes.unshift(
function ( sData )
{
if (sData !== null && sData.match(/^(0[1-9]|[12][0-9]|3[01])[\\/-](0[1-9]|1[012])[\\/-](19|20|21)\\d\\d$/))
{
return 'uk_date';
}
return null;
}
);
// sorting - UK date
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) {
var ukDatea = a.split(/[\\/-]/);
var ukDateb = b.split(/[\\/-]/);
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
if (isNaN(x)) { x = 0; }
if (isNaN(y)) { y = 0; }
console.log("sort: " + x + "," + y + ": " + ((x < y) ? -1 : ((x > y) ? 1 : 0)));
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
var ukDatea = a.split(/[\\/-]/);
var ukDateb = b.split(/[\\/-]/);
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
if (isNaN(x)) { x = 0; }
if (isNaN(y)) { y = 0; }
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};