CODEWITHSUNDEEP
jqueryregexdatatables
dylanmac
dylanmac

Reputation: 353

jQuery DataTables fnFilter: find the exact match of a string within a concatenated string

I am using datatables and am trying to filter my table based on the presence of an ID in a hidden column. The hidden column contains multiple IDs and they are delimited by "@" signs, e.g. @2311@11@3546@ (Note: the delimiter could be anything; we simply chose "@").

When I pass in the categoryId as a var (filterValue) to the DataTables fnFilter, I get partial matches. For example if my categoryId=1 it will match against "1", "11" and "2311".

I want the categoryId to exactly match any of the numbers within the column, between (delimited by) the "@". I'm pretty unfamiliar with RegEx which the fnFilter API supports and that I assume would be the best approach. I don't really have much productive code to share, unfortunately.

Here's the function I have so far:

var oTable = $('#fundTable').dataTable(); //the dataTable object
var filterCol = $("#table th.colCats").index(); //the index of the column to search in
$('.product-filter').click(function() { //click a link to filter the data table
    var filterValue = $(this).attr('href').match(/categoryId=([0-9]+)/)[1]; //grab the cat ID from the link
    oTable.fnFilter(filterValue, filterCol, true, false); //use fnFilter API to pass in the value, the col index, regex true/false, smart filtering true/false 
    oTable.fnDraw(); //redraw the table using filter result
    return false; //don't activate anchor link
});

And here's an edited version of the table I am using:

<table id="fundTable">
    <thead>
        <tr role="row">
            <th>
                Fund
            </th>
            <th>
                Categories
            </th class="colCats">
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Fund 1
            </td>
            <td>
                @23@2311@
            </td>
        </tr>
        <tr>
            <td>
                Fund 2
            </td>
            <td>
                @123@4567@1234@
            </td>
        </tr>
    </tbody>
</table>

I believe the DataTables API says you can use a regex expression in place of the value (filterValue). I'm just not sure how to write it.

Upvotes: 2

Views: 11201

Answers (2)

William Hammock
William Hammock

Reputation: 171

I had a similar problem, however I only needed to match input sequentially. For me this worked, adding ^ before the value and adding the 3rd param (regex) to true.

Note: this was used in conjunction with a input that had a jQuery keyup function attached, hence the complex second parameter.

 oTable.fnFilter("^" + this.value,
 oTable.oApi._fnVisibleToColumnIndex(binding.gridId.fnSettings(),  
 $("thead input").index(this)), true );

Upvotes: 1

John - Not A Number
John - Not A Number

Reputation: 659

This is pretty simple - I do something very similar in some of my code (though I used '=' to either side of my IDs - adjust accordingly):

    oTable.fnFilter('=' + filterValue + '=', filterCol);
    oTable.fnDraw();

Since the default filtering looks for the string anywhere within the column, no further regex wizardry is needed.

Upvotes: 1

Related Questions