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

Question

I have a page that dynamically fills the datatables jquery plugin from datatables.net.

On the page there are 4 tables generated and this is performed by .each jquery call. I have setup an array to hold these datatables:

oTable[x].  

Once the data has filled the datatables, I have to instantiate the filtering by calling this function:

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

I have a counter running that counts each time a new table is created. I was trying to use a for loop to handle the filtering by doing so:

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

Unfortunately, It doesn't seem to work. When I execute the filtering via the dropdown it goes to the .live line but executes everyone as x=1. Something else is wrong I think.

This code does work but is not dynamic:

$("#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); }); 

What I would like to have happen is generate the above code dyanmically based on the counter passed in at the end of the .each loop that creates the datatables. For instance, if the counter=5 then 5 of the above statements would be generated so that the filtering works for each dropdown.

I hope I am explaining this properly. If not, please ask questions and I will tune my question to better address my issue.

Thanks for your help guys!

Answer 1

I suggest you use a class selector. For each select, add a class, say "selectchange".

Then use just one selector, instead of a loop:

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

See this jsfiddle: http://jsfiddle.net/KAqfk/

If you want to get it to work your way, you'll need to pass in "x" as an argument:

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

In your original code, you use x in the inline function, but when the function is executed the value of x is unknown (it is probably the value when the for loop exited, unless you use x elsewhere). I know this can be confusing but you have to be careful with inline functions. The code $("#selectMetricImperial" + x) knows what x is. But the inner function is not called until the change event is fired, when x could be anything.

bqb