DataTables custom filtering (range filtering) example
Preamble
There may be occasions when you wish to filter data presented to the end user in your own manner, common examples are number range filtering (in between two numbers) and date range filtering. DataTables provide an API method to add your own filtering functions, $.fn.dataTableExt.afnFiltering. This is an array of functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.
Live example
Minimum engine version:
Maximum engine version:
Show entries
Search:
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Gecko
Firefox 1.0
Win 98+ / OSX.2+
1.7
A
Gecko
Firefox 1.5
Win 98+ / OSX.2+
1.8
A
Gecko
Firefox 2.0
Win 98+ / OSX.2+
1.8
A
Gecko
Firefox 3.0
Win 2k+ / OSX.3+
1.9
A
Gecko
Camino 1.0
OSX.2+
1.8
A
Gecko
Camino 1.5
OSX.3+
1.8
A
Gecko
Netscape 7.2
Win 95+ / Mac OS 8.6-9.2
1.7
A
Gecko
Netscape Browser 8
Win 98SE+
1.7
A
Gecko
Netscape Navigator 9
Win 98+ / OSX.2+
1.8
A
Gecko
Mozilla 1.0
Win 95+ / OSX.1+
1
A
Showing 1 to 10 of 57 entries
Initialisation code
/* Custom filtering function which will filter data in column four between two values */
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iMin = document.getElementById('min').value * 1;
var iMax = document.getElementById('max').value * 1;
var iVersion = aData[3] == "-" ? 0 : aData[3]*1;
if ( iMin == "" && iMax == "" )
{
return true;
}
else if ( iMin == "" && iVersion < iMax )
{
return true;
}
else if ( iMin < iVersion && "" == iMax )
{
return true;
}
else if ( iMin < iVersion && iVersion < iMax )
{
return true;
}
return false;
}
);
$(document).ready(function() {
/* Initialise datatables */
var oTable = $('#example').dataTable();
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
} );