dataTable search[Filter Plugin] doesn't work until change

Question

This is kind of a strange question, but this requirement came up about showing only those values inside a table which were selected using a dropdown list, I used dataTable plugin to display this data and to achieve the requirement I used the search[Filter plugin] feature. So whenever I selected any value from my dropdown list I entered it in the search input tag of dataTable. However, filtering of the data would not occur unless I changed the added data myself.

Have used the following script to add the selected value in the search box of DataTable; this function is triggered using onchange in the HTML tag:

function changeService(val) {
  var service = val;

  $('#example_filter').find('input').val(service);
}

This function adds the value in the required search input tag - I can see the value in the textbox; but the data within the dataTable is not filtered until I change this...

Answer 1

Instead of trying to hack around the ui, why not use the DataTables api for this:

http://datatables.net/api#fnFilter

So when you're dropdown list changes, you could call the fnFilter function on your datatable:

$('#dropdownlist').on('change', function() {
   var val = $(this).val();

   var dataTable = $('#table').dataTable();
   dataTable.fnFilter(val);
});