jquery-pluginstablesorterquick-search

Tablesorter Filter with Quicksearch Plugin Issue for Showing Corresponding Contents


I am trying to make the table shows the corresponding contents when I pick a category. I have that successfully implemented. However, if I search in the search box (using the quicksearch plugin) after I pick a category, it will search all the rows in the table rather than only searching for corresponding contents. How do I make it so, it will only search the corresponding items?

Here is the demo

http://jsfiddle.net/azsuA/

UPDATED Question

Now I have one child row under Coke in the table. I am wondering why is it being counted as "filteredRows"? How do I make "filteredRows" not including the child rows in the table? And for some reason, if I pick "Uncategorized", it'll say "1 - 1/ 1 (1) / 14" where it should be "- / (14)"

Another demo

http://jsfiddle.net/azsuA/4/


Solution

  • You'll need to disable, then re-enable quicksearch on the new categories (updated demo). First set up quicksearch like this:

    /**
     *  Filter the table.
     *  Resource: https://github.com/riklomas/quicksearch
     */
    var quickSearchOptions = {
        show: function () {
            $(this).show().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');
        }
    };
    $('.search').quicksearch('table tbody tr', quickSearchOptions);
    

    Then, when you select a cateogy, disable, then re-enable quicksearch:

    /**
     *  Show the corresponding contents when a category is clicked.
     *  Resource: http://tinyurl.com/jvneeey
     */
    $('ul').on('click', 'li', function () {
        var filters = [],
            $t = $(this),
            col = $t.data('filter-column'), // zero-based index
            txt = $t.data('filter-text') || $t.text(); // text to add to filter
    
        filters[col] = txt;
        // using "table.hasFilters" here to make sure we aren't targetting a sticky header
        $.tablesorter.setFilters($('table.hasFilters'), filters, true); // new v2.9
        // disable previous quicksearch
        $('.search')
            .off('keyup')
            .quicksearch('table tbody tr:not(.filtered)', quickSearchOptions);
    });