2

持っているJavaScriptテーブルにJQueryTablesorter2.7。*を使用しています。いくつかの列にドロップダウンフィルタリングオプションを設定するために、TablesorterFilterウィジェットも使用しています。新しい課題があります。テーブルに列を動的に追加する必要があります。私はこの質問を見ました：jQueryのテーブルソーターで管理されているテーブルに動的に列を追加する -これは、列を追加/削除するたびにテーブルを削除して再作成することをお勧めします。これは十分に公平ですが、これによりフィルターウィジェットとの競合が発生します。

フィルタ関数を適用するために、JavaScriptは次のようにインデックスのみで列を参照します。

        widgetOptions: {
            filter_reset: '.reset',
            filter_functions: {
                2: true,
                3: true,
            }
        }

このコードにより、インデックス2および3の列にデフォルトの選択フィルターが設定されます。この問題は、新しい列が動的に追加されるときに発生します。これらの列のインデックス値は変更される可能性があります。

これは私の質問をもたらします。名前で具体的に名前が付けられた列にウィジェットオプションを適用する方法はありますか？そうでない場合は、フィルター機能を妨げることなく、列を動的に追加/削除できる機能を実現するために実装できるソリューションはありますか？

編集：私はフィルター関数も使用しています。

4

1 に答える 1

1

更新＃2：tablesorter v2.17.0以降、クラス名*またはIDを使用して、filter_functionsオプション内の列をターゲットにすることができます。

// filter functions
widgetOptions: {
    filter_functions : {
        ".exact" : function(e, n, f, i) {
            return e === f;
        }
    }
}

*注：クラス名には、、、、、、、、、など、あらゆる種類のインデックスを使用するセレクターを"th:eq()"含めることはできません。":gt()"":lt()"":first"":last"":even"":odd"":first-child"":last-child"":nth-child()"":nth-last-child()"

ドキュメントでは、filter_functionsオプションを使用する代わりの方法が示されています。

または、列フィルター関数をtrueに設定する代わりに、列ヘッダーに「filter-select」というクラス名を付けます。デモをご覧ください。

したがって、filter-select代わりにクラス名を列に追加するだけです。

更新：他のフィルター関数が使用されているため、初期化コードの外部でこれらの関数を定義できます（デモ）

// Add these options to the select dropdown (date example) 
// Note that only the normalized (n) value will contain
// the date as a numerical value (.getTime())
var dateFxns = {

    // Add these options to the select dropdown (date example) 
    // Note that only the normalized (n) value will contain
    // the date as a numerical value (.getTime())
    "< 2004": function (e, n, f, i) {
        return n < Date.UTC(2004, 0, 1); // < Jan 1 2004
    },
    "2004-2006": function (e, n, f, i) {
        return n >= Date.UTC(2004, 0, 1) && // Jan 1 2004
        n < Date.UTC(2007, 0, 1); // Jan 1 2007
    },
    "2006-2008": function (e, n, f, i) {
        return n >= Date.UTC(2006, 0, 1) && // Jan 1 2006
        n < Date.UTC(2009, 0, 1); // Jam 1 2009
    },
    "2008-2010": function (e, n, f, i) {
        return n >= Date.UTC(2008, 0, 1) && // Jan 1 2006
        n < Date.UTC(2011, 0, 1); // Jam 1 2009
    },
    "> 2010": function (e, n, f, i) {
        return n >= Date.UTC(2010, 0, 1); // Jan 1 2010
    }
},
currentDateColumn = 3,
filterFxn = {};
filterFxn[currentDateColumn] = dateFxns;

$('table').tablesorter({
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_functions: filterFxn
    }
});
于 2013-02-12T18:56:10.233 に答える