2

我正在将 JQuery Tablesorter 2.7.* 用于我拥有的 JavaScript 表。我还在使用 Tablesorter 过滤器小部件，以便让我的几个列具有下拉过滤选项。我有一个新的挑战：我需要动态地向表中添加列。我已经看到了这个问题：将列动态添加到使用 jQuery 的表排序器管理的表中 - 建议我在每次添加/删除列时删除并重新创建表。这很公平，但是这会导致与 Filter Widget 发生冲突。

为了应用过滤器函数，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"or ":odd", ":first-child", ":last-child", ":nth-child()",":nth-last-child()"等。

在docsfilter_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 回答