Question

我有一个页面可以动态填充datatables.net中的datatables jquery插件。

在页面上生成了4个表，这是由.each jquery调用执行的。我已经设置了一个数组来保存这些数据表：

oTable[x].

一旦数据填满了数据表，我就必须通过调用这个函数来实例化过滤：

oTable[x].fnFilter("^" + $(this).val() + "$", 8, true);

我有一个计数器运行，每次创建一个新表时都会计数。我试图使用for循环来处理过滤：

 for (var x = 1; x < counter; x++) {
    $("#selectMetricImperial" + x).live('change', function () { oTable[x].fnFilter("^" + $(this).val() + "$", 8, true); });
  }

不幸的是，它似乎不起作用。当我通过下拉列表执行过滤时，它会转到.live行，但会执行每个人x = 1。我认为还有其他问题。

此代码确实有效，但不是动态的：

$("#selectMetricImperial" + 1).live('change', function () { oTable[1].fnFilter("^" + $(this).val() + "$", 8, true); });
$("#selectMetricImperial" + 2).live('change', function () { oTable[2].fnFilter("^" + $(this).val() + "$", 8, true); });
$("#selectMetricImperial" + 3).live('change', function () { oTable[3].fnFilter("^" + $(this).val() + "$", 8, true); });
$("#selectMetricImperial" + 4).live('change', function () { oTable[4].fnFilter("^" + $(this).val() + "$", 8, true); });

我想要发生的是根据在创建数据表的.each循环末尾传入的计数器动态生成上述代码。例如，如果counter = 5，那么将生成上述语句中的5个，以便过滤适用于每个下拉列表。

我希望我能正确解释这一点。如果没有，请提出问题，我会调整我的问题以更好地解决我的问题。

感谢您的帮助！

Answer 1

我建议你使用类选择器。对于每个选择，添加一个类，比如说“selectchange”。

然后只使用一个选择器，而不是循环：

$(".selectchange").on("change", 
    function() 
    { 
        var id = this.id.substring("selectMetricImperial".length);
        alert(id);
        alert($(this).val());
        oTable[id].fnFilter("^" + $(this).val() + "$", 8, true);
    }
);

请参阅此jsfiddle：http://jsfiddle.net/KAqfk/

如果你想让它以自己的方式工作，你需要传入“x”作为参数：

for (var x = 1; x < counter; x++) {
    $("#selectMetricImperial" + x).live('change', x, 
        function (e) { oTable[e.data].fnFilter("^" + $(this).val() + "$", 8, true); });
  }

在原始代码中，你在内联函数中使用x，但是当执行函数时，x的值是未知的（它可能是for循环退出时的值，除非你在别处使用x）。我知道这可能会令人困惑，但你必须小心内联函数。代码$("#selectMetricImperial" + x)知道x是什么。但是在触发change事件之前不会调用内部函数，当x可以是任何东西时。

BQB

Datatables jquery插件 - 通过多个表循环过滤

1 个答案: