When a DataTable is initialised, each column is scanned automatically for the type of data it contains, which in turn allows DataTables to apply the require type of sorting function. There are three built-in types (string, date and numeric) but this can readily be expanded using the functions below. This can make installed a sorting plug-in much easier since you need not specify the sType for the column - it will be picked up automatically.
To use of one of the plug-in type detections functions below, you simply need to include it and its counterpart sorting function, in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. Then all you need to do is initialise the DataTable and the type will be automatically detected. As an example the code below makes use of the numeric comma type detection and sorting functions, saved into two different files for clarity (live example):
<script type="text/javascript" src="jquery.dataTables.js"></script> <script type="text/javascript" src="dataTables.numericCommaSort.js"></script> <script type="text/javascript" src="dataTables.numericCommaTypeDetect.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#example').dataTable(); } ); </script>
Currency
Show details |
This plug-in will add automatic detection for currency columns to DataTables. Note that only $ and £ symbols are detected with this code, but it is trivial to add more or change the current ones. This is best used in conjunction with the currency sorting plug-in. |
Author: | Allan Jardine, Nuno Gomes |
Code: |
(function(){ // Change this list to the valid characters you want var validChars = "$£€c" + "0123456789" + ".-,'"; // Init the regex just once for speed - it is "closure locked" var str = jQuery.fn.dataTableExt.oApi._fnEscapeRegex( validChars ), re = new RegExp('[^'+str+']'); jQuery.fn.dataTableExt.aTypes.unshift( function ( data ) { if ( typeof data !== 'string' || re.test(data) ) { return null; } return 'currency'; } ); }()); |
Formatted numbers
Show details |
This plug-in will strip out non-numeric formatting characters such that a formatted number (for example 1,000,000) can be detected automatically and sorted numerically. Note that characters a-z are not automatically removed, otherwise there is a risk of detecting columns as numeric which should not be. Also note that the jQuery 1.7 method isNumeric is used, so jQuery 1.7 is required. |
Author: | Allan Jardine |
Code: |
jQuery.fn.dataTableExt.aTypes.unshift( function ( sData ) { var deformatted = sData.replace(/[^\d\-\.\/a-zA-Z]/g,''); if ( $.isNumeric( deformatted ) || deformatted === "-" ) { return 'formatted-num'; } return null; } ); |
Commas for decimal place
Show details |
Automatically detect numbers which use a comma in the place of a decimal point to allow them to be sorted numerically. Please note that the 'Formatted numbers' type detection and sorting plug-ins offer greater flexibility that this plug-in and should be used in preference to this method. |
Author: | Allan Jardine |
Code: |
jQuery.fn.dataTableExt.aTypes.unshift( function ( sData ) { var sValidChars = "0123456789,."; var Char; var bDecimal = false; var iStart=0; /* Negative sign is valid - the number check start point */ if ( sData.charAt(0) === '-' ) { iStart = 1; } /* Check the numeric part */ for ( i=iStart ; i<sData.length ; i++ ) { Char = sData.charAt(i); if (sValidChars.indexOf(Char) == -1) { return null; } } return 'numeric-comma'; } ); |
Numbers with HTML
Show details |
This type-detection plug-in will look at an HTML string from a data cell, strip the HTML tags and then check to see if the remaining data is numeric. If it is, then the data can be sorted numerically with the Numbers with HTML sorting plug-in. |
Author: | Allan Jardine |
Code: |
jQuery.fn.dataTableExt.aTypes.unshift( function ( sData ) { sData = typeof sData.replace == 'function' ? sData.replace( /<[\s\S]*?>/g, "" ) : sData; sData = $.trim(sData); var sValidFirstChars = "0123456789-"; var sValidChars = "0123456789."; var Char; var bDecimal = false; /* Check for a valid first char (no period and allow negatives) */ Char = sData.charAt(0); if (sValidFirstChars.indexOf(Char) == -1) { return null; } /* Check all the other characters are valid */ for ( var i=1 ; i<sData.length ; i++ ) { Char = sData.charAt(i); if (sValidChars.indexOf(Char) == -1) { return null; } /* Only allowed one decimal place... */ if ( Char == "." ) { if ( bDecimal ) { return null; } bDecimal = true; } } return 'num-html'; } ); |