Filtering disabled for Hidden Columns with Individual Column Filtering

tomwitt

Hi all.

I'm trying to combine a couple of the Datatable features but I've run into some snags. I want to have hidden columns (that can be toggled on/off) with individual filters on those columns. If my columns are initially invisible, the individual column filters for those columns won't work. Individual column filters will work for initially visible columns but fail for the initially hidden columns which are then made visible.

Here's a mash-up of the toggle hidden columns and individual column filtering examples which illustrate the problem.

http://pastie.org/912079

Any idea how to allow individual column filters to work with initially hidden columns?

Thanks.

-- Tom

tomwitt

Anybody?

ssg

Hi,

I'm dealing with something similar, i must let the user toggle the visibility of the columns. To outlive refreshes, i use a cookie which represents the visibility as a binary array (1,0,0...) I'm not sure if this is the best approach though.

The problem was that after hiding some columns, the data for the individual filters still held the 'old' indexes, so for example, if the user hid two columns and then wanted to filter on column #3, he had to write on the 5th input box to get the desired output.

As a workaround I tried counting the number of invisible columns, and then adding that number to the parameter sent to fnFilter():

var invisibles = (calculated somewhere in the code);
jQuery('tfoot input').keyup(function () {
myTable.fnFilter( this.value, jQuery('tfoot input').index(this) + invisibles );
});


However I'm getting erratic behaviour; sometimes the filtering works well but suddenly my script has errors.
The first error is when filtering:

myTable is undefined
[myTable.fnFilter(this.value, jQ...ot input').index(this) + invisibles); ]

The second when hiding a column:

Node was not found" code: "8
[nTrHead.removeChild( anTheadTh[iCol] ); ]


i haven't found a pattern for those yet. Maybe has to do with the cookie.

Any comments? Hope that idea helps. Cheers,

allan

DataTables has two internal helper functions which it uses for this kind of thing, and exposes through the API:

_fnVisibleToColumnIndex
_fnColumnIndexToVisible

Each of them takes the first parameter as the settings object and the second as the index you want to base a calculation off. The return value it the calculated index. You'll want to go from visible to column index if you are basing your calculations of the live DOM and showing and hiding elements.

These two functions can be accessed through the oApi object (so oTable.oApi._fnVisibleToColumnIndex( oTable.fnSettings(), 1); for example ).

Regards,
Allan

ssg

Thanks for the hint Allan!

Now column visibility + column filtering are working together well :)

The lines i used in my script were:

[code]
jQuery('tfoot input').keyup(function () {
var realIndex = oTable.oApi._fnVisibleToColumnIndex( oTable.fnSettings(), jQuery('tfoot input').index(this));
myTable.fnFilter(this.value, realIndex);
});
[/code]

Thanks again!

ssg

Correction, the lines are

[code]
jQuery('tfoot input').keyup(function () {
var realIndex = myTable.oApi._fnVisibleToColumnIndex( myTable.fnSettings(), jQuery('tfoot input').index(this));
myTable.fnFilter(this.value, realIndex);
});
[/code]

:)

allan

Nice one - thanks for the code :-)

Regards,
Allan

jasons

This was really a helpful post! One addition I might hazard though... In my case I had a mixture of inputs and selects in my column filters and in order to get the above suggestion to work I did the following (for the input elements):

[code]
jQuery('tfoot input').keyup(function () {
var realIndex = myTable.oApi._fnVisibleToColumnIndex( myTable.fnSettings(), this.parentNode.cellIndex);
myTable.fnFilter(this.value, realIndex);
});
[/code]

The select's onChange event is identical

allan

Good shout on using _fnVisibleToColumnIndex - I think that needs to become a publicly documented API method in future...

Allan