DataTables logo DataTables

Filtering plug-in functions

The filtering plug-in options that DataTables provides are remarkably powerful, and and let you set almost any filtering criterion you wish for user based input. A couple of things to note for filtering, firstly you will likely need to customise the filtering presented on this page to match your specific needs. Secondly, if you are using server-side processing, DataTables doesn't do any client-side filtering, so these plug-ins will not have any effect (with server-side processing, all data manipulation is done by the server - so you would need to implement these filters there).

Range filtering (dates)
Show details 		Filter a column on a specific date range. Note that you will likely need to change the id's on the inputs and the columns in which the start and end date exist.
Author: guillimon (on the forum)
Code: 
$.fn.dataTableExt.afnFiltering.push(
	function( oSettings, aData, iDataIndex ) {
		var iFini = document.getElementById('fini').value;
		var iFfin = document.getElementById('ffin').value;
		var iStartDateCol = 6;
		var iEndDateCol = 7;
		
		iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2)
		iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2) 		
		
		var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
		var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);
		
		if ( iFini == "" && iFfin == "" )
		{
			return true;
		}
		else if ( iFini <= datofini && iFfin == "")
		{
			return true;
		}
		else if ( iFfin >= datoffin && iFini == "")
		{
			return true;
		}
		else if (iFini <= datofini && iFfin >= datoffin)
		{
			return true;
		}
		return false;
	} 
);
Range filtering (numbers)
Show details 		Filter a specific numeric column on the value being between two given numbers. Note that you will likely need to change the id's on the inputs and the column in which the numeric value is given.
Author: Allan Jardine
Code: 
$.fn.dataTableExt.afnFiltering.push(
	function( oSettings, aData, iDataIndex ) {
		var iColumn = 3;
		var iMin = document.getElementById('min').value * 1;
		var iMax = document.getElementById('max').value * 1;
		
		var iVersion = aData[iColumn] == "-" ? 0 : aData[iColumn]*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;
	}
);

/* Example initialisation */
$(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(); } );
} );

Note that all contributed code is copyright to the original author, unless otherwise stated.