1

テーブルに次の 2 つの優れたプラグインを使用し、テーブルをフィルタリングしています。

  1. クイックサーチ: https://github.com/riklomas/quicksearch
  2. テーブルソーター: https://github.com/Mottie/tablesorter

ここにありますDEMO：http://jsfiddle.net/cETxv/

テーブルソーターでクイックサーチを機能させるのに問題があります。私のテーブルは、一度に 10 行 (デフォルト)、20 行、30 行、40 行、または 50 行の表示に制限されます。問題は、10 件を超える一致 (「wildberry」など) を含むテーブルを検索すると、すべての結果が 1 ページに表示されることです。10 (デフォルト) に制限し、残りの結果は次のページに移動します。もう 1 つの問題は、検索ボックスをクリアした後、表に最初の 10 行 (デフォルト) ではなくすべての行が表示されることです。

また、ページが最初にロードされたときは、テーブル全体をロードしていました。しかし、操作の順序を変更しました (tablesorter を呼び出してから quicksearch を呼び出すから、quicksearch を呼び出してから tablesorter を呼び出すように)。

誰でもこれを修正する方法を知っていますか? または、テーブルソーターにはテーブルの外側に組み込みフィルターがありますか?

どんな助けでも大歓迎です！

4

1 に答える 1

1

ホーム Wiki ページ(下部)にデモがあり、これら2つのプラグインをページャーの有無にかかわらず組み合わせる方法を示しています。

基本的に、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');
    }
});

「hasFilters」クラスをテーブルに追加して、ページャープラグインがフィルタリングされた行/ページをいつ計算するかを認識できるようにします

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

上記の変更で更新されたデモは次のとおりです。

于 2013-11-01T15:02:39.057 に答える