本文介绍如何通过一行核心代码实现 datatables 中“清除筛选”按钮的功能，使其同时清空全局搜索框内容和所有下拉列筛选器，确保表格恢复到初始未筛选状态。
在使用 DataTables 构建带级联下拉筛选的表格时，常见的需求是提供一个“Clear Filters”按钮，一键还原所有筛选状态——包括全局搜索文本（search()）和各列的独立筛选条件（columns().search()）。默认情况下，DataTables 并不自动绑定此类操作，需手动为按钮注册事件并调用对应 API。
关键实现逻辑如下：
当点击 #test 按钮时，执行两步操作：
- table.search('')：清空全局搜索输入框的值；
- table.columns().search('').draw()：遍历所有列，清除每列的自定义搜索条件（如正则匹配 ^value$），然后强制重绘表格。
完整可运行代码如下（已整合原示例逻辑）：
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true
});
buildSelect(table);
table.on('draw', function() {
buildSelect(table);
});
// ✅ 绑定清除筛选按钮
$('#test').on('click', function() {
table.search('').columns().search('').draw();
});
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, { search: 'applied' });
counter++;
var select = $('<select><option value=""></option></select>')
.appendTo($('#dropdown' + counter).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d) {
select.append('<option value="' + d + '">' + d + '</option>');
});
// 恢复当前选中项（保持 UI 与筛选状态同步）
var currSearch = column.search();
if (currSearch) {
var cleanVal = currSearch.replace(/^\^|\$$/g, ''); // 移除 ^ 和 $
select.val(cleanVal);
}
});
}⚠️ 注意事项：
- table.columns().search('') 必须配合 .draw() 才生效，否则仅重置内部状态而不刷新视图；
- 若列筛选使用了正则表达式（如 '^value$'），清除时只需传入空字符串即可，无需手动还原正则结构；
- buildSelect() 在每次 draw 后被调用，确保下拉菜单始终与当前数据一致，且能正确回显已清除的筛选状态；
- 如需增强用户体验，可在点击后重置所有
$('#dropdown1, #dropdown2, #dropdown3').find('select').val('');综上，table.search('').columns().search('').draw() 是清空 DataTables 全局+列级筛选的最简、最可靠方案，适用于绝大多数自定义筛选场景。
