Input type search clear button Microsoft Edge not working properly with Datatables
Input type search clear button Microsoft Edge not working properly with Datatables
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.
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?
3 Answers
3
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.
keyup
keydown
keypress
cut
paste
mousedown
mouseup
You could create event handler that force a redraw when mouseup is triggered :
mouseup
$('.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
This is not working unfortunately
– Markie Mark
Sep 2 at 21:56
@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 3 at 1:47
table
var myTable = $('#someId').DataTable()
myTable
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();
– Markie Mark
Sep 3 at 8: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 3 at 9:27
I get it, thnx for your answer!
– Markie Mark
Sep 7 at 12:12
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.
datatables.net/forums/discussion/51947/…
– Markie Mark
Sep 8 at 11:04
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
Thnx, i will do that!
– Markie Mark
Sep 7 at 12:12
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
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 5 at 8:48