Combining Sorting and Filtering

tablewarrior

I've assembled a table which combines both sorting and filtering using the examples available on this website. However, it is my wish to have the filtering controls co-located with the sorting controls in the header. So far, I've been able to basically get it to work except for the following problem. When the filter controls (select elements) are located in the header, clicking/operating them also initiates sort functionality. I am trying to see if there is a way for me to better separate these out.

Here is the code I have right now (snippet):

[code]
/* Add a select menu for each TH element in the table footer */
$("thead th").each( function ( i ) {
this.innerHTML += fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
}
[/code]

I have the headings in tags (for other reasons) so one possibility I was thinking about was attaching the sort events to that tag inside the instead of the whole . Thoughts?

tablewarrior

I figured out how to do this. The trick appears to be to remove the event listeners on the headers, then add them back in, into the containing tags.
[code]
/* Add a select menu for each TH element in the table footer */
$tableHeader.each( function ( i ) {
this.innerHTML += fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val().replace(/<.*?>/g, ''), i );
} );
} );

/* Unbind default sort listeners and add sort listeners */
$tableHeader.unbind('click');
$tableHeader.each( function(i) {
oTable.fnSortListener( $('div', this).get()[0], i );
} );
[/code]

The site has been very helpful for me to piece this together. Thanks!

allan

Yup - perfect solution :-). Nice one and thanks for posting your findings.

Allan