Question

I wanted to create a datatable with dropdown list box on its header which filters the rows to be displayed according to the selected column in the box. I modified the examples here column filtering example to display the dropdown list box in the header

   /* Add a select menu for each TH element in the table footer */
   //   $("tfoot th").each( function ( i ) {
      $("thead th").each( function ( i ) {
       ...

It works fine but it performs sorting when I click the dropdown list box. Is it possible to disable the sorting when I’m performing actions on the dropdown and just trigger sorting when I clicked anywhere in the cell which is not part of the dropdown.

Thanks.

Answer 1

$("thead th").each( function ( i ) {
    this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
    $('select', this).change( function () {
        oTable.fnFilter( $(this).val(), i );
    } );
    $('select', this).click( function (event) {
        event.stopPropagation();
    } );
} );