如何使用jQuery DataTable通过按钮文本值实现搜索筛选？

你完全可以把重复的搜索逻辑抽出来，利用按钮自带的配置或DOM节点获取文本值，不用每个按钮都硬编码搜索内容。这样代码更简洁，后期维护也方便！

优化后的完整代码 #

<script>
$(document).ready(function() {
  $('#myTable').DataTable({
    dom: 'Bfrtip',
    buttons: [
      { text: "text1", action: handleButtonSearch },
      { text: "text2", action: handleButtonSearch },
      { text: "text3", action: handleButtonSearch }
    ]
  });

  // 通用的按钮搜索处理函数
  function handleButtonSearch(e, dt, node, config) {
    // 两种获取按钮文本的方式选一种就行
    const searchText = config.text; // 从配置里取文本（推荐，更可靠）
    // 或者用DOM节点获取：const searchText = $(node).text().trim();
    dt.column(0).search(searchText).draw();
  }
});
</script>

关键说明 #

1. 复用处理函数：把每个按钮的action指向同一个函数handleButtonSearch，避免重复写相同的搜索逻辑。
2. 获取按钮文本：
   • config.text：DataTable按钮的配置对象里直接存储了按钮的文本值，这是最可靠的方式，不会受按钮DOM元素的额外格式（比如空格、图标）影响。
   • 如果你的按钮文本可能有多余空格，也可以用$(node).text().trim()来获取并清理文本。
3. 保持搜索逻辑一致：不管按钮文本是什么，都会自动把它作为第0列的搜索值，完美替代原来的硬编码写法。

这样以后要加新按钮，只需要添加{ text: "新文本", action: handleButtonSearch }就行，不用再复制粘贴搜索代码啦！

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