如何使用DataTables实现嵌套表格全局搜索同时过滤所有层级内容

核心调整思路 #

• 移除嵌套表格的搜索框：修改嵌套表初始化的dom配置，去掉搜索框对应的f参数
• 同步全局搜索逻辑：监听主表格的搜索事件，将搜索关键词同步传递给所有嵌套表格执行过滤

完整调整后代码 #

<!-- 原有表格结构不需要修改 -->
<table id="example">
    <thead>
        <tr>
            <td>Col A</td>
            <td>Col B</td>
            <td>Col C</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td valign="top">
                <table>
                    <tr>
                        <td>Data</td>
                        <td>Data2</td>
                    </tr>
                </table>
            </td>
            <td valign="top">
                <table>
                    <tr>
                        <td>Data3</td>
                        <td>Data4</td>
                    </tr>
                </table>
            </td>
            <td valign="top">
                <table>
                    <tr>
                        <td>Data5</td>
                        <td>Data6</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    const columns = [
      { title: '' },
    ]
    // 存储所有嵌套表格的DataTables实例
    let nestedTables = []

    let table = $('#example').DataTable({
      createdRow: function(row) {
        $(row).find('td table').each(function() {
          const nestedTable = $(this).DataTable({
            columns: columns,
            // 移除f参数，仅保留表格本身，隐藏搜索框
            dom: 't'
          })
          nestedTables.push(nestedTable)
        })
      }
    })

    // 监听主表格搜索事件，同步关键词到所有嵌套表格
    table.on('search.dt', function() {
      // 获取主表格当前搜索关键词
      const keyword = table.search()
      // 遍历所有嵌套表执行同步搜索
      nestedTables.forEach(nestedTable => {
        nestedTable.search(keyword).draw()
      })
    })
</script>

效果说明 #

当你在主表格的全局搜索框输入关键词时，所有嵌套表格会自动使用相同关键词执行过滤，无匹配内容的嵌套表格会展示为空，完全符合预期效果。

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