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

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是什么。 但是在更改事件被触发之前，内部函数不会被调用，而x可以是任何东西。

BQB