如何为Server-Side模式的DataTables编程设置自定义筛选值？

你已经把DataTables的默认筛选框隐藏了，想要通过侧边栏的按钮触发筛选，其实DataTables本身就提供了专门的API来搞定这件事——search()方法，正好能满足你的需求。

核心解决方案 #

在你的按钮点击事件里，只需要调用DataTables实例的search()方法传入筛选文本，再调用draw()刷新表格就可以了。如果侧边栏有输入框，先获取输入框的值再传入方法即可。

修改后的按钮点击事件代码如下：

$("#btnTest").click(function () { 
    // 假设侧边栏的搜索输入框ID是sidebarSearch，先获取它的值
    var filterText = $("#sidebarSearch").val();
    // 设置筛选条件并触发表格刷新
    generatedCustomerTable.search(filterText).draw(); 
}); 

关键API说明 #

• search(filterValue)：这个方法用于设置DataTables的全局搜索值，传入空字符串''可以清除当前的筛选条件。
• draw()：调用这个方法会重新绘制表格，在serverSide模式下，会把搜索参数（search[value]）通过Ajax发送到你的后端接口/api/Ajax/Test，所以你需要在后端代码里处理这个参数，对数据进行筛选后返回。

额外补充：实时筛选（可选） #

如果你希望用户在输入框输入时就实时触发筛选，而非点击按钮，可以给输入框绑定input事件：

$("#sidebarSearch").on("input", function() {
    generatedCustomerTable.search($(this).val()).draw();
});

这样就能完全脱离DataTables的默认筛选框，实现自定义位置的搜索功能啦。

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