tablesorter.filterFormatter.select2 doesn't work with special characters

[gurditta]

Code for the Filter :

3 : function($cell, indx){
    return $.tablesorter.filterFormatter.select2( $cell, indx, {
        match : false,
        placeholder: 'search...'
    });
},

Issue is in the attached screenshot

I tried making match : true, which also doesn't work

[Mottie]

Hi @gurditta!

It looks like the main issue is that the filterFormatter was written for select2 v3.4.6. When the value contains a comma (e.g. A & A Recycling, LLC.) it splits it into an array; so the value of that select2 becomes ["A & A", "LLC."] (demo).

It looks like the issue was fixed in the latest version of select2, v4.0.0 beta 2, where the result is the proper string ["A & A, LLC."] (demo).

So what happens is that when the select2 filterformatter code sees an array, it thinks you are looking for two separate tags; so an exact match won't find "A & A" and a match will find the "A & A" but it won't match any select2 tags and thus the correct results show up, but no tags are visible in the select2 input.

Basically this can be solved in two ways:

1. Remove the commas
2. Update filterformatter for select2 to work with select2 v4.0.0

I don't have that much free time, so option 2 probably won't be happening any time soon. And since I plan on releasing a new filter option called filter_customVal which will pretty much make the filterFormatter option obsolete, that makes an update to the select2 filterformatter even less likely.

I'm not saying I won't ever update the select2 filterformatter. I just don't have the time right now.

[gurditta]

Hi @Mottie
Thanks much for replying, really appreciate that.
But the problem still persists (another problem came up) a weird behavior found, Please have a keen look at the below screenshot i've tried to make it as understandable as i could :)

It's not only about the comma you're talking about.

[Mottie]

Ok, there was a bug in the select2 filterFormatter code in that it was not escaping special regex characters - like the parenthesis!

So I've fixed that part of the select2 filterFormatter code (ref) - here is a demo.

You can get a copy of the fixed code from here : https://github.com/Mottie/tablesorter/blob/working/js/jquery.tablesorter.widgets-filter-formatter-select2.js

Please note that:

• The commas still need to be removed.
• This update will not work with select2 v4.0.0 beta 2.

[gurditta]

Thanks a lot for the fix.

For the comma problem, i'm not able to understand whether I'll have to remove the comma from the table data or the drop down

[Mottie]

Hmm, I actually had to dig into the code and found that you can change the separator setting (demo)

0: function ($cell, indx) {
    return $.tablesorter.filterFormatter.select2($cell, indx, {
        separator: "|",
        match: true // adds "filter-match" to header
    });
},

So now you don't have to worry about the commas in the table, but now you can't manually type in a comma to create a new tag.

Gotta love incomplete documentation.

[Mottie]

By the way, you can save yourself a lot of headache/work by adding a class name to your headers:

<th class="select2">AlphaNumeric</th>
<th class="select2">AlphaNumeric 2</th>
<th>Numeric</th>
<th class="select2">Animals</th>
<th>Sites</th>

then instead of defining the filterFormatter for every column index, just use the class name (demo):

filter_formatter: {
    // target all select2 columns
    '.select2' : function ($cell, indx) {
        return $.tablesorter.filterFormatter.select2($cell, indx, {
            separator: '|',
            match: true // adds "filter-match" to header
        });
    }
}

[gurditta]

That's cool @Mottie
It's working fine now
Thanks much!!!