Integrating quicksearch

[ghost]

Hi,

I integrated quicksearch to search the entire table via a single input:

https://github.com/riklomas/quicksearch

However, this doesn't really work with pagination enabled, it only searches the currently visible page.

Is there any sample of how I should convert this to a widget? I checked the filter widget, but that seems really complex.

All I want is that it searches the entire table and keeps paginating the table.

I understand this is going to be added in 3.0 - but unfortunately I need this functionality at this very moment. So any help is appreciated.

Thank you.

[hereswhatidid]

Try setting the removeRows option to false in your Pager Options. What the Pager does if that is set to true (default) is that it basically recreates the table body every time you change the page. This would then cause your search filter to only search what's currently visible.

[Mottie]

Hi wesleyh!

I'll try to look at this tomorrow, but it is as @hereswhatidid says, set the removeRows option to false.

Then if you can get that quick search plugin to add a class name of filtered to the row, then the pager will properly paginate the table.

[ghost]

Hi, thanks for the fast response! I have added "filtered" on rows that are going to be hidden, and removed it when these rows are going to be shown. However, it still displays all results on the first page. Do I need to call something in the tablesorter plugin to get it to reflect the new state?

Thanks again.

[Mottie]

Ahhh sorry!

Hmmm, it looks like you might have to add the class "hasFilters" to the table itself before initializing the pager plugin.

Then if you need to, trigger the filter end event after the quicksearch as initialized to make it update:

$('table').trigger('filterEnd');

If that doesn't work, I'll dig into it more later today.

[ghost]

This works beautifully! Thank you for your hard work on this plugin, great job.

[Mottie]

Ok, with the latest update (v2.4.6) you no longer need to add the "hasFilters" class to the table. And in addition to triggering the filterEnd event, you can also trigger the updateComplete event to update the pager.

[Mottie]

Please see this comment for working code & a demo.