Fixed Columns and Individual column filtering (Selected inputs)

dgibson25

Hello all,

I am working an application that uses data tables to present a table with fixed columns and individual column filtering using selected inputs. I have not been able to find a solution to allow me to filter the first column. I am aware that this issue has not been covered in the examples for DataTables and wanted to know if anyone had any insight on how to maneuver further. Here is a working example:

http://live.datatables.net/gofulimu/1/edit

Everything else works except for the filtering in the first column.

Thank you for your time.

awelch

Your problem is the change event listener at the end.

$( table.table().container() ).on( 'change', function () {
        table
            .column( $(this).val())
            .search( this.value )
            .draw();
  });

I'm not sure what you're trying to accomplish here but this will not do anything useful. The table().container() function get's the wrapper div that encapsulates the table (.dataTables_wrapper). Being a div, this element has no value attribute so val() and value will return undefined. Passing undefined to the column() function will return column 0 in the result set. This is the default return value and the same as calling table.column().search(...).

So, what happens is when you select something in the drop down list in the first column it fires the 'change' event for that select element, handling the search appropriately; then the event bubbles up to the container element (.dataTables_wrapper) performing the search again but passing undefined for the column (returning column 0) and undefined for the search value (this is the same as passing an empty string). The result of this is that searching in the first column gets steamrolled by this erroneous event listener.

As an aside, you probably will want to put a 'click' event listener on the select elements so that you can call stopPropagation to keep from ordering the columns everytime you click a drop down list.

colin

Hi @dgibson25 ,

The problem is that you were searching twice - once in the initComplete event handler, and again in your event handler further down. I think you based your code on this example, but you'll also notice there's an attribute that defines the column number.

I've applied that to your example, and all is behaving now - see here.

Cheers,

Colin