DataTable搜索时无法隐藏已展开行子元素，求排查解决

我来帮你排查下问题所在～你的代码里有两个关键问题导致无法实现预期效果，咱们一步步来修正：

问题1：直接遍历DOM行的局限性 #

你用$("#tblTemplateList tr")遍历表格行，但DataTable会做分页处理，不在当前页面的行其实不在DOM里，所以这种方式只能处理当前页的行，其他分页的展开子行根本不会被触及。

问题2：子行API调用错误 #

你写的$(tr).child.isShown()是错误的调用方式——DataTable的子行操作必须通过它自身的API来访问，不能直接用jQuery对象的child属性。

修正后的代码 #

直接使用DataTable的API来遍历所有行（包括分页中的行），并正确操作子行：

var table = $("#tblTemplateList").DataTable();

// 遍历DataTable实例中的所有行
table.rows().every(function() {
    // 判断当前行的子元素是否处于显示状态
    if (this.child.isShown()) {
        // 隐藏子行
        this.child.hide();
        // 可选：如果你的行有展开/折叠的状态标记（比如按钮样式、行类名），这里可以同步重置
        // 示例：假设展开时行有个expanded类，这里移除它
        $(this.node()).removeClass('expanded');
    }
});

（可选）绑定到搜索事件自动执行 #

如果想在每次搜索时自动关闭所有展开子行，可以把逻辑绑定到DataTable的search事件：

var table = $("#tblTemplateList").DataTable();

// 监听搜索事件
table.on('search.dt', function() {
    table.rows().every(function() {
        if (this.child.isShown()) {
            this.child.hide();
            $(this.node()).removeClass('expanded');
        }
    });
});

这样每次用户执行搜索操作时，所有展开的子行都会自动收起啦～

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