Column filtering with select & input: Can't get the right index

burnchar

I've been trying for about 6 hours to get this to work. I am not master of Javascript, so it's probably my fault. I'm just trying to get both and column filtering working.

columns work as intended, but the columns either filter the wrong column or filter all columns on one input.

I looked at this post: [quote]http://www.datatables.net/forums/discussion/4426/multi-column-filtering/p1 [/quote]
...but it doesn't appear to be that simple. When I use:

[code]
$("tfoot input").keyup(function () {
var foo = $("tfoot input").index(this);
oTable.fnFilter(this.value, $("tfoot input").index(this));
});
[/code]
fnFilter gets the 0-based index of columns. If I have columns 0 and 4, their indexes in the above function are 0 and 1. This doesn't work because fnFilter expects the index out of ALL columns (0 and 4 in this case).

The only way I know to get the index that fnFilter wants is to use something like the code in this post: [quote]http://www.datatables.net/forums/discussion/4011/filtering-use-both-input-and-select-boxes/p1 [/quote]
[code]
$(".dataTables_scrollFootInner tfoot th").each(function (i) {
if ($(this).is('.ti')) {
$("tfoot input").keyup(function () {
oTable.fnFilter(this.value, i);
});
}
});
[/code]

This gives fnFilter the right index, but it filters ALL columns, not just the one. For example, if I type "foo" into column 4, the filter requires BOTH 0 and 4 contain the text "foo."

How do I either get the "useful" index for the in the first code block or filter only one column in the second? Is there a better way to do this?

allan

The trouble is this:

[code]
$("tfoot input").index(this)
[/code]

It is giving you an index based on the number of input elements, rather than input and select elements. You could try something like this:

[code]
$("tfoot th").index(this.parentNode)
[/code]

Although the exact answer will depend on your specific setup.

In your second round of code you have:

[code]
$("tfoot input").keyup(function () {
[/code]

which is going to pick up all input elements in the tfoot - since there is no limiter on it. You want:

[code]
$("tfoot input", this).keyup(function () {
[/code]

Allan

allan

Also this plug-in might be of some interest to you: http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html

Allan

numberone

try this :
[code]
$("tfoot th").keyup( function () {
oTable.fnFilter( $(this).children("input").val(), $("tfoot th").index(this) );
} );
[/code]

Regards,
Yusuf

burnchar

Thank you Allan and numberone. I appreciate your time.
I tried both Allan's suggestion for the first block of code and numberone's suggestion. Both work perfectly.
Note that I am using "sScrollX", so for those finding this post when searching, change "tfoot th" ".dataTables_scrollFootInner tfoot th" if you too use sScrollX in your DataTables initialization.