jQuery plugins quicksearch with tablesort

Question

I'm using these two nice plugins for tables and filtering the table:

1. Quicksearch: https://github.com/riklomas/quicksearch
2. Tablesorter: https://github.com/Mottie/tablesorter

Here is the DEMO : http://jsfiddle.net/cETxv/

I'm having an issue to make quicksearch working with tablesorter. My table will limit to display 10 (default), 20, 30, 40, or 50 rows at a time. The issue is that if you search in the table that has more than 10 matches (such as "wildberry"), it will show all the result in 1 page; but I want it to be limited to 10 (default) and the rest of the result goes to next page. Another issue is that after clearing the search box, the table will show all the rows rather than the first 10 (default) rows.

Also, loading full table was the case when the page first loaded. But I changed the order of operations (from calling tablesorter then quicksearch, to calling quicksearch then tablesorter)

Anyone knows how to fix this? Or does tablesorter have a built-in filter outside of the table?

Any help will be greatly appreciated!

Answer 1

There is a demo on the home wiki page (at the bottom) showing how to combine these two plugins with and without the pager.

Basically, you'll need to include these options with Quicksearch:

$('#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 () {
        $('table').trigger('update.pager');
    }
});

and add a "hasFilters" class to the table, so the pager plugin knows when to calculate filtered rows/pages

$('table').addClass('hasFilters');

Here is your demo updated with the above changes.