如何为DataTables网格添加自定义搜索框？新手可行方案分享

嘿，各位刚入坑DataTables的小伙伴们！我最近也在折腾给DataTables网格加自定义搜索框，一开始踩了好大的坑——去官方论坛和Stack Overflow翻了好几个方案，试了全不管用，差点心态崩了。后来我把两个不同方案的思路结合起来，在本地调试（类似用在线调试工具的方式）终于搞出了一个稳定能用的方法，特意分享出来给大家避坑！

具体实现步骤 #

1. 先在页面添加自定义搜索框
   先在HTML里放一个你想要的搜索输入框，比如：

   <div class="search-box">
     <input type="text" id="customSearch" placeholder="输入关键词快速搜索...">
   </div>
   

2. 初始化DataTables并绑定搜索事件
   关键是要正确获取DataTables的API实例，然后给搜索框绑定keyup事件，调用DataTables的搜索方法：

   $(document).ready(function() {
       // 初始化DataTables，这里的#example是你的表格ID
       var myTable = $('#example').DataTable();
   
       // 给自定义搜索框绑定搜索事件
       $('#customSearch').on('keyup', function() {
           // 调用DataTables的search方法，传入输入值，然后重绘表格
           myTable.search($(this).val()).draw();
       });
   });
   

3. 进阶：指定列搜索（可选）
   如果你不想全局搜索，只想搜某一列（索引从0开始），比如第2列，可以改成这样：

   $('#customSearch').on('keyup', function() {
       myTable.column(1).search($(this).val()).draw();
   });
   

我踩过的坑（划重点！） #

• 一开始失败是因为用了$('#example').dataTable()来初始化，这个返回的是jQuery对象，不是DataTables的API实例！一定要用DataTable()（首字母大写）才能拿到能调用search方法的实例。
• 另外，事件绑定一定要放在DataTables初始化之后，不然会找不到表格实例，自然触发不了搜索。

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