Datatables length menu计数折叠行问题 如何仅统计用户可见行

核心需求是保留全量数据供导出的同时，让前端分页、条目数统计仅对用户可见的行生效，以下是两种可行方案：

方案1：自定义行过滤器（推荐，兼容原生逻辑） #

不需要手动设置行的visibility属性，通过Datatables内置的过滤机制实现，对原生分页、length menu的侵入性最低：

• 给需要前端隐藏的行数据添加自定义标识，比如hideOnFrontend: true，全量数据仍保存在Datatables实例中
• 添加全局自定义过滤函数，前端展示时过滤掉标记为隐藏的行，原生length menu和分页会自动按过滤后的行数统计：

$.fn.dataTable.ext.search.push(
    function(settings, searchData, index, rowData, counter) {
        // 仅针对目标表格生效，避免影响其他Datatables实例
        if(settings.nTable.id !== '你的表格ID') return true;
        // 过滤掉标记为前端隐藏的行
        return rowData.hideOnFrontend !== true;
    }
);

• 配置导出按钮时关闭过滤限制，保证全量数据都能被导出：

buttons: [
    {
        extend: 'excel',
        exportOptions: {
            modifier: {
                // 导出时忽略过滤规则，取所有行数据
                search: 'none'
            }
        }
    },
    {
        extend: 'pdf',
        exportOptions: {
            modifier: {
                search: 'none'
            }
        }
    }
]

方案2：保留CSS collapse设置的兼容方案 #

如果必须通过visibility: collapse的方式隐藏行，可以手动重写统计和分页逻辑：

$('#你的表格ID').DataTable({
    // 其他原有配置
    infoCallback: function(settings, start, end, max, total, pre) {
        // 手动统计可见行数量，替换默认的统计文本
        const visibleTotal = $(this).find('tbody tr[style*="visibility: visible"]').length;
        return `显示第 ${start} 至 ${end} 条结果，共 ${visibleTotal} 条`;
    },
    preDrawCallback: function(settings) {
        const api = new $.fn.dataTable.Api(settings);
        // 按可见行数量调整分页参数
        const visibleCount = api.rows(function(idx, data, node) {
            return $(node).css('visibility') !== 'collapse';
        }).count();
        settings._iRecordsTotal = visibleCount;
        settings._iRecordsDisplay = visibleCount;
    }
})

该方案需要额外处理分页跳转的边界场景，复杂度高于方案1，非必要场景优先选择第一种方案。

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