添加DataTables外部搜索框后清空按钮点击无响应问题的解决求助

我之前也碰到过一模一样的问题，其实根源很好找：浏览器自带的搜索框清空按钮（就是那个小叉叉）点击时，并不会触发keyup事件，但你之前的代码只监听了keyup，所以表格收不到更新信号，就一直卡在搜索结果状态。而DataTables默认的搜索框是内置处理了所有输入变化场景的，所以不会有这个bug。

最直接有效的解决方法，是把监听的事件从keyup换成input——这个事件能覆盖所有输入内容变化的场景，包括点击清空按钮、粘贴文本、剪切内容等等，完美适配你的需求。

修改后的代码如下：

$(document).ready(function () { 
  var table = $('#example').DataTable({ 
    "dom": 'ifrtp' 
  }); 
  // 替换keyup为input事件，覆盖更多输入操作
  $('#mySearchText').on('input', function () { 
    table.search(this.value).draw(); 
  }); 
});

如果需要兼容非常老旧的浏览器（比如IE9及以下），还可以额外加上propertychange事件的监听，不过现在大部分场景下只用input就足够了：

$('#mySearchText').on('input propertychange', function () { 
  table.search(this.value).draw(); 
});

这样修改后，点击搜索框的清空按钮，表格就会立刻重新绘制并显示全部数据了。

内容的提问来源于stack exchange，提问作者Lorraine1996