DataTable导出PDF/Excel删除列及列反转功能异常问题求助

问题根源 #

代码存在三处逻辑错误导致两个问题出现：

• 列过滤配置位置错误：columns: ':visible:not(.not-export-col)'规则被错放在format配置项内，不属于exportOptions的根层级配置，导致指定列过滤规则完全不生效，导出时无法删除标记为not-export-col的列
• 列反转逻辑未适配过滤结果：原有表头反转逻辑直接读取完整表格的全部表头内容，没有提前排除不需要导出的列，过滤后列数量变化导致索引错位，反转功能无法正常运行
• rows回调逻辑误用：exportOptions.rows的回调函数要求返回布尔值判断当前行是否需要导出，原有代码直接返回反转后的行数据，既不符合回调要求，也无法实现列反转的效果

修复后完整代码 #

$(document).ready(function(){
    var table = $('#example').DataTable({
        dom: 'B<"top"iflp<"clear">>rt<"bottom"ip<"clear">>',
        buttons: [
            { 
                extend: 'pdf',
                text: 'To PDF',
                exportOptions: {
                    columns: ':visible:not(.not-export-col)', 
                    format: {
                        header: function ( data, idx, nodes ) {
                            // 先获取所有待导出的表头节点，再反转匹配索引
                            const exportHeaders = table.columns(':visible:not(.not-export-col)').header().toArray();
                            const reversedHeaders = exportHeaders.reverse().map(el => el.innerText.trim());
                            return reversedHeaders[idx];
                        },
                        body: function (data, rowIdx, colIdx, node) {
                            // 先获取当前行所有待导出的单元格数据，再反转匹配索引
                            const rowData = table.row(rowIdx).data();
                            const exportColIndexes = table.columns(':visible:not(.not-export-col)')[0];
                            const exportRowData = exportColIndexes.map(index => rowData[index]).reverse();
                            return exportRowData[colIdx];
                        }
                    }
                }
            },
            { 
                extend: 'excel',
                text: '导出Excel',
                exportOptions: {
                    columns: ':visible:not(.not-export-col)', 
                    format: {
                        header: function ( data, idx, nodes ) {
                            const exportHeaders = table.columns(':visible:not(.not-export-col)').header().toArray();
                            const reversedHeaders = exportHeaders.reverse().map(el => el.innerText.trim());
                            return reversedHeaders[idx];
                        },
                        body: function (data, rowIdx, colIdx, node) {
                            const rowData = table.row(rowIdx).data();
                            const exportColIndexes = table.columns(':visible:not(.not-export-col)')[0];
                            const exportRowData = exportColIndexes.map(index => rowData[index]).reverse();
                            return exportRowData[colIdx];
                        }
                    }
                }
            }
        ]
    });
});

核心修改说明 #

1. 将列过滤规则移到exportOptions根层级，确保导出前先过滤掉不需要的指定列，解决删列异常问题
2. 表头和表格内容反转前，先根据过滤规则拿到待导出的列集合，再执行反转操作，索引完全匹配过滤后的列，解决列反转失效问题
3. 移除错误的rows回调逻辑，改为在body格式化回调中处理单元格内容的反转匹配，符合DataTable的导出规则

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