CODEWITHSUNDEEP
javascriptjqueryregexdatatabledatatables
Vaasugi
Vaasugi

Reputation: 11

Regex with 'OR' condition doens't work in DataTable fnFilter

I'm using DataTables 1.9.6 and trying to do column multi filtering for my project, using DataTables' fnFilter function with no luck. I have tried all the suggested ways in the forums to make it work, but still couldn't get it work.

My issue is, the OR operator '|' or even '||' with string values to filter a column doesn't work.

Here is my question as posted at the DataTables forum:
http://datatables.net/forums/discussion/19737/regex-with-or-condition-doenst-work-in-fnfilter

I used the DataTables Debug BookMarklet to upload my datatables and the debug code is 'olohos'.

My issue is, the OR operator '|' or even '||' with string values to filter a column doesn't work in my web application.

For example, if I have the code below

$('.search_init').keyup(function()
{
var asEscapedFilters = [];
asEscapedFilters[0] = $(this).val();
asEscapedFilters[1] = 'Y';
oTable.fnFilter(asEscapedFilters[0] | asEscapedFilters[1], $('#example tr.inputs input').index(this), true, false);
});

And input the string 'I' in the search area for the 'Order Active' column, it is supposed to return all the rows which contains either 'I' or 'Y' for the 'Order Active' column. Instead it returns zero rows.

If I use '||' instead of '|' like the below,

$('.search_init').keyup(function()
{
var asEscapedFilters = [];
asEscapedFilters[0] = $(this).val();
asEscapedFilters[1] = 'Y';
oTable.fnFilter(asEscapedFilters[0] || asEscapedFilters[1], $('#example tr.inputs input').index(this), true, false);
});

It returns the rows which have 'Y' for the 'Order Active' column, but not the rows with 'I'.

I have already spent a lot of time, looking at this issue, any useful suggestions to get this work is very much appreciated.

The processing is server side, does it requires it to take care of any additional syntax or settings for this?

And the DataTables BookMarklet Results.

http://debug.datatables.net/olohos

Any help in getting this to work appreciated.

Many thanks in advance.

Upvotes: 0

Views: 3581

Answers (1)

dsh
dsh

Reputation: 12214

I don't understand what you mean by 'The processing is server side'. The code you show is all JavaScript code, and is run in the browser.

So, you have JavaScript code, but there is no regex here:

oTable.fnFilter(asEscapedFilters[0] | asEscapedFilters[1], $('#example tr.inputs input').index(this), true, false);

Thus the | in your code is the JavaScript operator bitwise OR.

In your other attempt, the || is the JavaScript operator logical OR

The DataTables documentation says that the first argument to fnFilter() is '{string}: String to filter the table on', and the third argument is a flag indicating whether to treat the string as is or as a regular expression. So, you need to create a string which will be valid input to the constructor of RegExp()

Any time text (strings) is obtained from user input or any source external to your source code, it needs to be properly handled to avoid unexpected errors and security holes such as code injection when further processing is applied such as regular expressions. This applies equally to SQL, shell commands, HTML, and anything else that will be parsed and processed by a computer. Unfortunately, when I searched I discovered that the JavaScript standard library does not provide any built-in function to do this for you. The MDN documentation offers a function you can include in your code to properly escape the user's input before you use it to generate your regex. See the references I list below.

The correction to your code is as follows:

$('.search_init').keyup(function()
    {
    var asEscapedFilters = [];
    asEscapedFilters[0] = $(this).val();
    asEscapedFilters[1] = 'Y';
    var filterPattern = escapeRegExp(asEscapedFilters[0])
                        + "|" + escapeRegExp(asEscapedFilters[1]);
    oTable.fnFilter(filterPattern, $('#example tr.inputs input').index(this), true, false);
    });

Note that the | in this code is not a JavaScript operator, it is a character in a string. That string will be passed to the constructor of RegExp() by the datatables library. I created another local variable to increase the readability of the function call by keeping the arguments simpler and thus more compact and having descriptive names. If the second part of your pattern will always be a constant, then it does not need to be escaped and you could write it like this: var filterPattern = escapeRegExp($(this).val()) + "|Y";.

References:

Upvotes: 1

Related Questions