Select Column Filtering

kamran

I'm trying to find a way to update select values based on the column once the code on this page executes on my table:

http://datatables.net/release-datatables/examples/api/multi_filter_select.html

I tried all kinds of variations, and after ten hours of no luck and realizing I really have no way of accomplishing this, I was wondering if someone could give me a nudge in the right direction.

This is what the original code is supposed to look like (without updating select filter):
[code]
/* Add a select menu for each TH element in the table footer */
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
} );
[/code]

I changed that to this:
[code]
$("tfoot .filter").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i).sort() );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
updateRows(oTable, i);
} );
} );
[/code]

I then added my custom function updateRow :
[code]
function updateRows(oTable, i) {
$("tfoot .filter").each( function ( j ) {
if ( j != i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(j).sort() );
}
} );
}
[/code]

This updates the select fields for the remaining table columns to the ones only available on screen, however, the plugin halts. The only column you can sort through after the first filter attempt is the first one only, and all updated columns no longer work filter. There are no errors generated by the script so I feel there is a logical error here.

Is any genius here able to see the error in my code? or am I totally oversimplifying this process and it needs a lot more work than that?

Thanks, guys.

allan

Sounds like you are removing the original SELECT element and thus the event attached to it is going with it. Try using Visual Event ( http://sprymedia.co.uk/article/Visual+Event+2 ) to confirm if the select elements have events attached to them or not after the first filter.

My guess is you will want to use live or delegate events.

Allan

kamran

Hi Allan,

Thank you for your response. I think you are right. Something happens to the event listeners on the select filters outside of the first one that I use.

Can you please explain what you mean by using live or delegating events?

kamran

Any help Allan? :(

gaadek

Hi,

I had exactly the same issue and I solved it.

When you replace the inner html by re-calling the function "fnCreateSelect", you loose the reference to the onChange event attached to the original element

To avoid that, I created a "fnCreateOption" to buils all content instead of the full .

Here's my code:
[code]function fnCreateSelect( aData )
{
return '' + fnCreateOptions(aData) + '';
}

function fnCreateOptions( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i

kamran

Hey gaadek,

Thank you so much for this chunk of code! It works!

I'm having a few issues with this though:

My filters are in a tr right below the headings, so when my select filters are put in, the "sort" capability shirts from the header tr to the filter tr.
The original select filter also gets filtered, but I'm guessing that it probably won't work without that in place, no?

allan

@kamran: It sounds like you want to use the bSortCellsTop option to make the click to sort option the top cells in the header rather than the bottom ones in the second row.

Regarding live and delegate events, the jQuery documentation is probably the best place: http://api.jquery.com/live/ and the newer http://api.jquery.com/on/ which you should use if using jQuery 1.7+.

@gaadek: Thanks very much for sharing your code :-)

Allan

gaadek

Thanks to you Allan for the awesome job you did with datatable! Contribution is the less we can do :)