Columnfilter Plugin - Two Server-Side Tables

maliwik

I'm using the Columnfilter plugin (in the extras section) and I have two tables which are server-side generated.

When I apply the .columnFilter() to each table, the second table is the only one which recognizes it. I try to filter the first table and nothing happens, but anything I type in the first table's individual column filters will filter the second table.

It seems to only work with one table. Is there any way to fix this?

maliwik

I managed to fix it. It seems the creation of the input functions were using the oTable defined globally regardless of how many tables were on the page. So basically it would use the very last table defined for ALL column filters.

If you pass the instance of oTable to the functions, it'll use only that particular instance.

I've outlined the main changes for the columnfilter.js plugin script. Unfortunately I only know how to fix the Number, Text and Select filter types.

To fix the Number and Text filter types, on line 43 (about) there is the fnCreateInput function. Change it from
[code]function fnCreateInput(regex, smart, bIsNumber){[/code]
to
[code]function fnCreateInput(regex, smart, bIsNumber, oTable){[/code]

On line 281 (about) change
[code]fnCreateInput(true, false, true);[/code]
to
[code]fnCreateInput(true, false, true, oTable);[/code]
and on line 286 (about) change
[code]fnCreateInput(bRegex, bSmart, false);[/code]
to
[code]fnCreateInput(bRegex, bSmart, false, oTable);[/code]

To fix the Select filter types, find the fnCreateSelect function on line 201 (about) and change
[code]function fnCreateSelect(aData) {[/code]
to
[code]function fnCreateSelect(aData, oTable) {[/code]

And on line 289 (about) change
[code] fnCreateSelect(aoColumn.values);[/code]
to
[code]fnCreateSelect(aoColumn.values, oTable);[/code]



The following will fix the hidden columns bug:
On line 60 (about) change
[code]oTable.fnFilter('^' + this.value, index, true, false);[/code]
to
[code]oTable.fnFilter('^' + this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), index), true, false);[/code]

On line 65 (about) change
[code]oTable.fnFilter(this.value, index, regex, smart);[/code]
to
[code]oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), index), regex, smart);[/code]

And on line 218 (about) change
[code]oTable.fnFilter($(this).val(), index);[/code]
to
[code]oTable.fnFilter($(this).val(), oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), index));[/code]


Finally, to fix the 'k is undefined' bug that sometimes occurs when using server-side data without an 'fnServerData' option in the DataTables initialization, find line 330 (about) and change
[code]fnServerDataOriginal(sSource, aoData, fnCallback);[/code]
to
[code]fnServerDataOriginal(sSource, aoData, fnCallback, oTable.fnSettings());[/code]

I hope these fixes help people. It was a pain to track down all of this and Google wasn't being very friendly with me.

Happy Easter all!