0

I am using the following Datatable example, with the addition of some hyperlinks: Datatable Column Filter

Example of hyperlink code added - <td><a href="link.html">Tiger Nixon</a></td>

Steps:

  1. Search/Filter any column in the table.
  2. Click on a hyperlink. -> nothing happens. (linked page should open)
  3. Click on a hyperlink again. -> linked page opens.

After using the column filter, I need to un-focus the column filter by clicking within the table rows, then I can click on the hyperlink.

Question: Can this be fixed so only one click is needed?

Further info:

This looks to be a similar issue to mine but not similar enough to fix my problem:

DataTables Column Filter Strange Behaviour

Community
  • 1
  • 1
Kyle Quigley
  • 1
  • 1

2 Answers2

1

The following code should be an easy solution to your question:

$("#example tfoot input").on('keyup change', function(event) {
    table
      .column( $(this).parent().index()+':visible' )
      .search( this.value )
      .draw();
    event.target.blur();
});

Reference: https://datatables.net/release-datatables/extensions/ColReorder/examples/initialisation/col_filter.htmll

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
0

I had the same problem too, my advice is to use something like

$(elementUsedAsFilter).blur();

in your change (or whatever) event handler. .blur() removes focus from the handler, after that you should be good to go! I think you should be able to get elementUsedAsFilter from the handler you used.

Fabio Lolli
  • 859
  • 7
  • 23
  • Appreciate your help with this Fabio. If possible, could you explain further how to add this to the JS in the example in my question? – Kyle Quigley Aug 26 '15 at 14:39