Custom DataTables Filter Enter Event

Today, i want to share about customizing one of DataTables feature. The feature that i want to change the behavior is filter function. Before we start with the code, you have to read the DataTables description on their website here.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

You can read the all function on DataTables official website. Here, i want to change the behavior of the filter function Custom DataTables Filter Enter Event. The original filter function is based on keyup, search, input, paste, cut event, so if you whether type, cut, paste, input or search to the search box DataTables library will automatically call _fnFeatureHtmlFilter(settings) function.

The original function is look like:

* Generate the node required for filtering text
* @returns {node} Filter control element
* @param {object} oSettings dataTables settings object
* @memberof DataTable#oApi
function _fnFeatureHtmlFilter ( settings )
var classes = settings.oClasses;
var tableId = settings.sTableId;
var language = settings.oLanguage;
var previousSearch = settings.oPreviousSearch;
var features = settings.aanFeatures;
var input = ‘‘;

var str = language.sSearch;
str = str.match(/_INPUT_/) ?
str.replace(‘_INPUT_’, input) :

var filter = $(‘

‘, {
‘id’: ! features.f ? tableId+’_filter’ : null,
‘class’: classes.sFilter
} )
.append( $(‘

One thought on “Custom DataTables Filter Enter Event

Leave a Reply

Your email address will not be published. Required fields are marked *