Replies

• awelch Posts: 38Questions: 1Answers: 3

  December 2018

  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 Posts: 15,143Questions: 1Answers: 2,586

  December 2018

  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