Question

当我选择一个类别时，我试图让表格显示相应的内容。我已经成功实施了。但是，如果我在选择一个类别后在搜索框中搜索（使用quicksearch插件），它将搜索表中的所有行，而不是仅搜索相应的内容。我如何做到这一点，它只会搜索相应的项目？

Here is the demo

更新问题

现在我在桌子下面有一个可口可乐下面的子行。我想知道为什么它被算作“filteredRows”？如何使“filteredRows”不包括表中的子行？出于某种原因，如果我选择“未分类”，它会说“1 - 1/1（1）/ 14”，它应该是“ - /（14）”

Another demo

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

Answer 1

您需要禁用，然后重新启用新类别的快速搜索（updated demo）。首先设置像这样的快速搜索：

/**
 *  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);

然后，当您选择一个cateogy时，禁用，然后重新启用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);
});

使用Quicksearch插件的Tablesorter过滤器显示相应内容的问题

1 个答案: