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( $(‘


Hi! iā€™m Didik Hari, I am Backend Developer, System Integration and Web Developer mostly using Java. I use jPOS for ISO 8583 integration format, and Spring to create Rest API.

One thought to “Custom DataTables Filter Enter Event”

Leave a Reply

Your email address will not be published.