DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

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

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(); } );
} );

Other examples