Select Filter in Table header

gauravguptain

Hey,

I added select filter like showing in example(http://datatables.net/examples/api/multi_filter_select.html). Instead of tfoot I added that in thead. Now when I click on select box it doesn't open the drop down instead sorting is triggered.
Is there any way to suppress the click event which clicked on select box?

mg

Hi gauravguptain,

When you added the select filter to the thead, what kind of markup did you use?

If you tried to add the element directly in the
that gets sorted, I think you may run into trouble:

[code]


Col 1 ....
Col 2 ....
Col 3 ....


[/code]
However, you may have more success if you try an approach similar to this:
[code]


Col 1
Col 2
Col 3


....
....
....



...

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

Trollchik

I ahve the same, but i have the select options in the header. And i met the next problem:

when i click on the select, the table began to invoke sorting function! i don't nee it. How to prevent sorting when i click exactly on the select element and don't prevent when i click on the header ??

Thanks in advance!

Trollchik

ok, i fixed the problem! i edit _fnBindAction like:

[code]
.bind( 'click.DT', oData, function (e) {
if( j(e.target).is('select')){
return false;
}else{
fn(e);
n.blur(); // Remove focus outline for mouse users
}
n.blur(); // Remove focus outline for mouse users
} )
[/code]

sunmit9

Hi, I am new to Data Tables. I am trying to display the select option for a particular column. I have tried using the code in http://www.datatables.net/examples/api/multi_filter_select.html but somehow I am not able to view the select toolbar. I would also like to know as where to keep the code and include it in my existing JSP. Can someone please help!