2

I am using Datatables to sort and filter my tables. When you activate Datatables, there is a search field. In Chrome, Firefox, Edge and Internet Explorer 11 there is a clear button present with every search input field.

enter image description here

When you click on it, the text is cleared and the table will reset. Except in Microsoft Edge, this does not work. The table is not resetting.

Is this an issue with Microsoft Edge or Datatables?

davidkonrad
  • 77,311
  • 15
  • 189
  • 243
  • If you have implemented a steady, working solution for DataTables filter input I think you should post it as answer here and accept it. Will happily upvote such answer, it is needed. – davidkonrad Sep 05 '18 at 08:48
  • As one of the answers indicates... This is an Edge bug. Please poke Microsoft about this issue. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17584515/ – AnthonyVO May 15 '19 at 23:39

3 Answers3

1

I believe it is Edge that not is triggering the events the DT input is listening on. That is keyup, keydown, keypress, cut and paste ...There is two additional events that is fired when you click on the search input clear button: mousedown and mouseup.

You could create event handler that force a redraw when mouseup is triggered : 

$('.dataTables_filter input').on('mouseup', function() {
  table.draw()
})

See this question where the issue is discussed more thoroughly -> Event fired when clearing text input on IE10 with clear icon

davidkonrad
  • 77,311
  • 15
  • 189
  • 243
  • @MarkieMark, I would have thought it worked too much, i.e the table would also be rerendered if you just click in the filter box (thats why I linked to the other question, did not want to copy the code). BTW you should replace `table` with your own DT reference; if you have `var myTable = $('#someId').DataTable({})` then you should use `myTable` instead. – davidkonrad Sep 03 '18 at 01:47
  • I edited your code, this is working but its not perfect (as it is firing every time you click on the input field): var table; table = $('table').DataTable(); table.search( ' ' ).columns().search( '' ).draw(); –  Sep 03 '18 at 08:18
  • @MarkieMark Yes, that is why you should grab one of the additional solutions in the link. I could have copy/pasted one of these ideas, but did not want to. The important thing was to point to the cause of the problem, the element in question and the type of event. – davidkonrad Sep 03 '18 at 09:27
  • I get it, thnx for your answer! –  Sep 07 '18 at 12:12
1

This is a known bug found in build 17.17134 of Edge.

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17584515/

I am using an earlier version and it still works.

Frank M
  • 946
  • 6
  • 12
  • https://datatables.net/forums/discussion/51947/input-type-search-clear-button-microsoft-edge-not-working-properly-with-datatables –  Sep 08 '18 at 11:04
0

I try to make a test on my side with EDGE and got the same result like yours.

When click on 'X' it is not reset the table.

Click here to see testing result

Then i made some other tests and find that if you use BackSpace key to clear the search text then it will work as expected.

If you use 'X' button then after text get clear you need to press enter to reset the data.

I agree with other community members that Edge is not triggering the event to reset data.

I think you need to submit your feedback to Datatables site. So that they modify their code which can work properly with Edge.

Regards

Deepak

Deepak-MSFT
  • 8,111
  • 1
  • 6
  • 14