DataTables logo DataTables

This site contains the legacy documentation for DataTables v1.9 and earlier for reference only.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.

Filtering plug-in functions

The filtering plug-in options that DataTables provides are remarkably powerful, letting 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).

DataTables supports two different kinds of plug-in filtering methods:

How to use DataTables plug-in column type based filtering

To make use of the column (type) based filtering plug-in functions below, you need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. You must also set the column type for the column(s) that you wish to apply the filter to using sType.

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.htmlColumnFilter.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var oTable = $('#example').dataTable({
			"aoColumns": [
				"sType": "html",
				null
			]
		});
	} );
</script>

Plug-in column type filtering functions

HTML tags removal
Show details 		DataTables has a built in type called 'html' which will strip HTML tags from a search string, but it doesn't cope with nested HTML inside another element's attributes (for example DOM0 events with have HTML in them). This plug-in function overrules the built-in method and provides complete HTML tag removal. Note that this function is not included in DataTables by default because it is slightly slower than the built-in method, which is good enough for by far the majority of use cases.
Author: guillimon (on the forum)
Code: 
$.fn.dataTableExt.ofnSearch['html'] = function ( sData ) {
	var n = document.createElement('div');
	n.innerHTML = sData;
	if ( n.textContent ) {
		return n.textContent.replace(/\n/g," ");
	} else {
		return n.innerText.replace(/\n/g," ");
	}
}

How to use DataTables plug-in row filtering functions

To add the functionality provided by the filtering functions below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. These filters are global and will be applied whenever DataTables applies it's own filtering (for details please see the filters development page).

In the following example the range filtering (numbers) plug-in is saved to a file, and used in the DataTable which is initialised. Note also that event listeners are applied to the two inputs, which will cause the table to redraw, and thus filter the new data (live example):

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.rangeFilter.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var oTable = $('#example').dataTable();
		
		/* Add event listeners to the two range filtering inputs */
		$('#min').keyup( function() { oTable.fnDraw(); } );
		$('#max').keyup( function() { oTable.fnDraw(); } );
	} );
</script>

Plug-in row filtering functions

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.