I use picnet tablefilter in my application.
http://www.picnet.com.au/resources/tablefilter/demo.htm
Tablefilter generates an input for each column. After entering some characters in an input, the filtering is triggered.
Wanting to make the header fixed I made a copy of that header and placed it so it floats right over the header used by tablefilter with position: fixed
.
I built the same inputs with id = "my_filtertable_filter_3" instead of id = "filtertable_filter_3" like this:
$( '#fixed_table thead' ).append( '<tr class="filters">' + $( '#container thead .filters' ).html() + '</tr>' );
$( '#fixed_table thead .filters input' ).each( function( index )
{
$( this ).attr( 'id', 'my_' + $( this ).attr( 'id' ) );
});
So now I have a header that looks exactly like the header of picnet tablefilter in the demo, that flows over the original header giving the impression, that the header is fixed.
An illustration (without the picnet situation obviously) of the problem is posted here: http://jsfiddle.net/bJ2K7/21/
What I want to achieve:
When the user enters a string to the input with id = "my_filtertable_filter_3", this function will enter the same value to the input generated by picnet tablefilter. I also trigger the keyup event, that ( after reading picnets code for a few hours ) seems to be triggering the filter.
$( '#fixed_table thead .filters input' ).keyup( function()
{
var input_id = $( this ).attr( 'id' ).substr( 3 );
var input_val = $( this ).val() ;
$( '#filtertable #hidden_thead .filters' ).find( 'input#filtertable_filter_3.filter' ).val( input_val );
$( '#filtertable #hidden_thead .filters' ).find( 'input#filtertable_filter_3.filter' ).trigger('keyup');
} );
While trying to catch this event like this, it seems to be working:
$( '#filtertable_filter_3' ).keyup( function()
{
alert( 'event caught' );
});
My question:
Is this an absolutely wrong approach to the problem, or am I just not firing the right event?
Problem:
As said in the comment below: the alert is fired, but the filter is not filtering ( the input value is filled. )
Did not find out what event I should trigger, but appended the original inputs to the fixed head and it seems to be working. So my solution was a huge overkill (at least I learned tons about events and event handlers).
If there is anybody who uses picnet tablefilter and wants to make a fixed table head, this, with the css&html from my jsfiddle will suffice.