Filter - table wide

[thezoggy]

right now the filter widget is scoped to a specific column both functionality and visually. It would be nice to have another widget to do filter but globally... aka i have a field outside of the table where i can search for something that exists throughout the whole table in any column/row. Same options would be needed.. ignoreCase / startsWith / etc. dunno if we can extend the existing filter to do both..

[Mottie]

I will add this to version 3... it seems a bit too slow in version 2, but in version 3 I plan to cache everything to make filtering much faster.

[aaronchi]

+1

[Mottie]

For now you can use https://github.com/riklomas/quicksearch

If you want to use that plugin with the pager addon, see the discussion in issue #160. Basically, make sure the pager's removeRows option to false and in that plugin's hide function, add the class filtered (untested code):

$('input#search').quicksearch('table tbody tr', {
    hide: function () {
        $(this).hide().addClass('filtered');
    }
});

[adrianstein]

Are you still adding a table wide filter to V3 or is it getting put in an upcoming version on V2? Either way is there any ETA on it?

[Mottie]

Hi @adrianstein!

Sorry no ETA. I'm really really busy with other, non-programming, stuff and really only have time to answer issues. I did try to modify the search plugin someone shared in this issue.

Either way, progress on version 3 is moving at a snails pace =(.

[arturocr]

I just applied the snippet that uses quicksearch plugin, however when I perform a filtering, the paging widget doesn't get updated... Any ideas?

[Mottie]

Hi @arturocr!

Try triggering one of the pager methods like pageSet and see if that updates the pager for you.

[arturocr]

Thanks for the answer @Mottie, it sets the pager to the specified page, but it doesn't refresh the info of number of pages and also the page size is ignored... I just want the pager to display it's info based on matched results.

[Mottie]

Did you try triggering a filterEnd event (ref)?

If that doesn't work, then please share a demo with me so I can look into the problem.

[arturocr]

Thanks again @Mottie...

I didn't get success, here's a sample of what I'm doing http://jsfiddle.net/ZFZNF/1/

Thanks in advance!

[Mottie]

Ok, I think I got it all working... I commented out the updateComplete code and made the following changes (demo):

$('#search').quicksearch('table tbody tr', {
    delay: 500,
    show: function () {
        $(this).removeClass('filtered');
        $table.trigger('pageSet'); // reset to page 1 & update display
    },
    hide: function () {
        $(this).hide().addClass('filtered');
        $table.trigger('pageSet'); // reset to page 1 & update display
    },
    onAfter: function () {
        // no need to update the table, just the pager, so use its namespace
        $table.trigger('update.pager');
    }
});

Edit: the table also needed the class name hasFilters added so the pager would know that it needed to calculate filtered rows and pages.

[arturocr]

Awesome, now the table respects the pager, however, is there any way to update the cssPageDisplay info?

Thanks for your help! I really appreciate it!

[Mottie]

As I mentioned in my last edit, add the class name hasFilters to the table. It's not shown in the code above, but it's done in the demo.

[arturocr]

@Mottie thank you so much for your help! 😄 👍

[Mottie]

Check out the new any match demo... I ended up removing the filter_anyMatch option and replacing it with filter_external which when an input has a data-attribute of data-column="any" it becomes a search that will match content in any column.