2

カテゴリを選択すると、対応する内容がテーブルに表示されるようにしています。私はそれをうまく実装しました。ただし、カテゴリを選択した後に (クイックサーチ プラグインを使用して) 検索ボックスで検索すると、対応するコンテンツのみを検索するのではなく、テーブル内のすべての行が検索されます。対応するアイテムのみを検索するようにするにはどうすればよいですか?

Here is the demo

http://jsfiddle.net/azsuA/

更新された質問

これで、テーブルの Coke の下に 1 つの子行ができました。「filteredRows」としてカウントされているのはなぜですか？テーブル内の子行を含まない "filteredRows" を作成するにはどうすればよいですか? そして、何らかの理由で、「未分類」を選択すると、「- / (14)」であるべきところが「1 - 1/ 1 (1) / 14」と表示されます。

Another demo

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

4

1 に答える 1

2

新しいカテゴリでクイック検索を無効にしてから再度有効にする必要があります (更新されたデモ)。最初に次のようにクイックサーチを設定します。

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

次に、カテゴリを選択したら、クイックサーチを無効にしてから再度有効にします。

/**
 *  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);
});
于 2013-11-28T00:57:28.053 に答える