DataTables Filtering

Filtering

Filtering is a core part of DataTables as it allows the end user to very quickly find the data that they are looking for in your table. The standard DataTables distribution presents a global filter for rapid searching of all information in the table ignoring column position and data rendering types. There is also the fnFilter API function available which will allow you to filter on individual columns, but again only on matching the input string against what is show in the table.

There may be times when you which to customise the filtering that DataTables has available, beyond these default methods, and this can be done through the two different filtering plug-in methods that DataTables presents:

• Type based column filtering - filtering based on the sType of the column.
• Custom row filters - filtering applied to the data from the whole row.

Type based column filtering

When you assign the sType for a column (or have it automatically detected for you by DataTables or a type detection plug-in), you will typically be using this for custom sorting, but it can also be used to provide custom filtering options. This is done by adding functions to the the object with a parameter name which matches the sType for that target column:

Run in JS Bin ?

1	$.fn.dataTableExt.ofnSearch

What happens here is that DataTables will construct a search array which is used for the filtering (this is done mainly as an optimisation, but it also useful for separating the searching information from the display, ideal for this kind of application!). As such, the function you add to the ofnSearch object will take a single parameter (the raw data from the data source) and is required to result a string which will be used for the filtering.

The example below shows an sType of title-numeric (used for sorting) which will strip the HTML tags from the input string and return the result. As such the end user's filtering input will not match on the HTML tags (it is worth noting that the built in type of 'html' will perform this action, but 'title-numeric' is used for numeric sorting with HTML tags):

Run in JS Bin ?

1 2 3

$.fn.dataTableExt.ofnSearch['title-numeric'] = function( sData ) {    returnsData.replace(/\n/g," ").replace( /<.*?>/g, ""); }

Custom row filters

This method of filtering is some what more comprehensive than the type based filtering in that it allows you the developer complete flexibility over the filtering that DataTables will apply to a row in the table. This is done by extending the DataTables custom filtering array with your function:

Run in JS Bin ?

1	$.fn.dataTableExt.afnFiltering

Function input parameters:

1. object - DataTables settings object
2. array - data for the row in question. Array is indexed by column
3. int - index of row in aoData

Function return:

1. boolean
   • true, filter matches - show in results
   • false, filter does not match - remove from the results

The following example shows custom filtering being applied to the fourth column (i.e. the aData[3] index) based on two input values from the end-user, matching the data in a certain range. You can see this example in actions in theAPI examples.

Run in JS Bin ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

$.fn.dataTableExt.afnFiltering.push(     function( oSettings, aData, iDataIndex ) {         variMin = document.getElementById('min').value * 1;         variMax = document.getElementById('max').value * 1;         variVersion = aData[3] == "-"? 0 : aData[3]*1;         if( iMin == ""&& iMax == "")         {             returntrue;         }         elseif( iMin == ""&& iVersion < iMax )         {             returntrue;         }         elseif( iMin < iVersion && ""== iMax )         {             returntrue;         }         elseif( iMin < iVersion && iVersion < iMax )         {             returntrue;         }         returnfalse;     } );

It's worth noting that DataTables will apply it's own input filtering as well as the custom global filtering (i.e. there is a double filter), so if you wish to completely disable DataTables' own global filtering and replace it with your own, just drop the 'f' (filtering) option from sDom.