【问题标题】:Input type search clear button Microsoft Edge not working properly with Datatables输入类型搜索清除按钮 Microsoft Edge 无法与数据表一起正常工作
【发布时间】:2019-02-07 08:42:54
【问题描述】:

我正在使用 Datatables 对我的表进行排序和过滤。当您激活数据表时,会有一个搜索字段。在 Chrome、Firefox、Edge 和 Internet Explorer 11 中,每个搜索输入字段都有一个清晰的按钮。

当你点击它时,文本被清除并且表格将被重置。除了在 Microsoft Edge 中,这不起作用。该表未重置。

这是 Microsoft Edge 或 Datatables 的问题吗?

【问题讨论】:

  • 如果您已经为 DataTables 过滤器输入实施了稳定、有效的解决方案,我认为您应该将其作为答案发布在这里并接受它。很乐意支持这样的答案,这是必要的。
  • 正如其中一个答案所表明的那样……这是一个 Edge 错误。请戳微软关于这个问题。 developer.microsoft.com/en-us/microsoft-edge/platform/issues/…

标签: datatables microsoft-edge


【解决方案1】:

我相信不是 Edge 触发了 DT 输入正在侦听的事件。即keyupkeydownkeypresscutpaste ...当您单击搜索输入清除按钮时会触发两个附加事件:mousedownmouseup

您可以创建在触发mouseup 时强制重绘的事件处理程序:

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

查看这个问题更彻底地讨论了这个问题 -> Event fired when clearing text input on IE10 with clear icon

【讨论】:

  • @MarkieMark,我会认为它工作得太多,即如果您只需单击过滤器框,表格也会重新呈现(这就是为什么我链接到另一个问题,不想复制代码)。顺便说一句,您应该将table 替换为您自己的 DT 参考;如果你有var myTable = $('#someId').DataTable({}),那么你应该使用myTable
  • 我编辑了你的代码,这是可行的,但它并不完美(因为它每次点击输入字段时都会触发): var table;表 = $('table').DataTable(); table.search('').columns().search('').draw();
  • @MarkieMark 是的,这就是为什么您应该获取链接中的其他解决方案之一。我本可以复制/粘贴其中一个想法,但不想这样做。重要的是指出问题的原因、有问题的元素和事件的类型。
  • 我明白了,谢谢你的回答!
【解决方案2】:

我尝试使用 EDGE 进行测试,结果与您的结果相同。

点击“X”时不会重置表格。

Click here to see testing result

然后我做了一些其他的测试,发现如果你使用 BackSpace 键清除搜索文本,它会按预期工作。

如果您使用“X”按钮,则在文本清除后您需要按回车键重置数据。

我同意其他社区成员的观点,即 Edge 不会触发事件来重置数据。

我认为您需要向 Datatables 网站提交反馈。以便他们修改可以与 Edge 正常工作的代码。

问候

迪帕克

【讨论】:

  • 谢谢,我会这样做的!
【解决方案3】:

这是在 Edge 版本 17.17134 中发现的一个已知错误。

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

我使用的是早期版本,但它仍然有效。

猜你喜欢
  • 2015-12-14
  • 1970-01-01
  • 2017-12-23
  • 2021-02-12
  • 2023-03-03
  • 2018-02-18
  • 2015-03-22
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多