click event on column control footer inputs

Mwhite007

https://live.datatables.net/zezuyela/7/edit

the end goal is to deselect and de-focus any DataTable row or cell when i click in the search input in the footer. I think i have the code to do that but the problem i am having is firing the click event when i click in a footer input. clicking on an input is ignored. i have tried many variations and when it miraculously works i think i solved it but then it goes back to not working
this is the current iteration:

  /* deselect any table cells with focus  */
  $("input.form-control").on('click', function() {
    console.log("click on footer input");
    systemTable.rows( {selected: true } ).deselect();
    systemTable.cell({focused:true}).cell.blur();
  });

kthorngren

Thanks for the test case. I haven't looked at the code but the ColumnControl event handlers might stop propagating the events. I would use a delegated event handler initialized before Datatables (ColumnControl) is initialized. For example:

/* deselect any table cells with focus  */
  $('#dt_system').on('click', "th div.dtcc-search input", function() {
    console.log("click on footer input");

    // Get an instance of the Datatables API
    var systemTable = $('#dt_system').DataTable();
    systemTable.rows( {selected: true } ).deselect();
    systemTable.cell({focused:true}).cell.blur();
  });
)

Updated test case:
https://live.datatables.net/dibinire/1/edit

Kevin

kthorngren

Looks like you can create the event after DT initialization:
https://live.datatables.net/dibinire/2/edit

Likely the problem is with the selector input.form-control. Inspecting the inputs it doesn't look like the classname form-control is added to the elements. Also you probably want a more specific selector to not have the event fire if you have input elements outside of ColumnControl.

Kevin

Mwhite007

thanks Kevin that seems to have done it!