Trigger column filter dropdown change event using jQuery/JS or update datatable based on select valu

sajidmanzoor

Hello,
I have a table and I want to apply column individual search/filter on datatable. For this i created an example here: https://codepen.io/sajiddesigner/pen/bGPjprV

On Codepen above, there is a dropdown 'Office Location' and I want to updated table result based on selected value in this dropdown for the office column in the table.
OR I want to trigger change or update table function for 'Office' column filter when 'Office Location' dropdown value is changed.

I tried trigger(change) and jQuery .change() but they donot work.

Thanks
Sajid

allan

Hi Sajid,

It is because you are mixing jQuery and non-jQuery code.

If you use:

          $(select).on("change", function () {
            column.search(select.value, { exact: true }).draw();
          });

Rather than

          select.addEventListener("change", function () {
            column.search(select.value, { exact: true }).draw();
          });

It will work.

jQuery.trigger doesn't trigger native event listeners (as I understand it). I've run into that problem in the past as well.

Allan

allan

See this SO post and its linked articles for more details btw.

Allan

sajidmanzoor

@allan Thank you for your help. I appended dropdown to a div outside data table and it is now working fine. I have updated the codepen example so that others can get help if they ever get stuck with this issue.
Codepen: https://codepen.io/sajiddesigner/pen/bGPjprV

Thanks
Sajid