jQuery DataTables导出Excel问题：无法导出全部符合条件的数据

嘿，我懂你碰到的这个坑——现在的导出逻辑只拿了页面上渲染好的当前分页DOM内容，自然只能导出10条或者当前页的记录。咱们得换个思路，直接从DataTables的内部数据池里捞所有符合过滤条件的记录，而不是盯着页面上那点渲染出来的内容。

问题根源 #

你现在用的table[0].outerHTML取的是DataTables为了性能只渲染当前分页的DOM节点，其他符合条件的记录都存在它的内部数据对象里，没渲染到页面上，所以导出自然只能拿到当前页的内容。

具体修改方案 #

咱们直接改导出按钮的点击逻辑，不用额外加插件，手动构建一个包含所有数据的临时表格再导出：

首先先修正你代码里一个小语法错误——DataTables初始化时多套了一层大括号，应该改成这样：

var table = $('#resultsTable').DataTable({
    "data": jsonObject,
    "columns": [
        {"data": "JOB_REFERENCE"},
        {"data": "VOYAGE_REFERENCE"},
        // 其他列...
    ],
    "iDisplayLength": 25,
    "scrollY": 500,
    "scrollX": true,
    "bDestroy": true,
    "paging": true,
    "stateSave": true
});

然后替换导出按钮的点击事件代码：

$("#btnExport").on('click', function(e) {
    e.preventDefault();
    
    // 1. 拿到所有经过搜索/过滤后的完整数据（不受分页影响）
    var allFilteredData = table.rows({ search: 'applied' }).data();
    
    // 2. 从原表格里提取表头文字
    var columnTitles = table.columns().header().toArray().map(header => $(header).text());
    
    // 3. 构建一个临时表格用来导出
    var tempExportTable = $('<table>');
    // 添加上表头
    var thead = $('<thead>').append($('<tr>').append(
        columnTitles.map(title => $('<th>').text(title))
    ));
    tempExportTable.append(thead);
    
    // 把所有数据行添进去
    var tbody = $('<tbody>');
    allFilteredData.forEach(row => {
        var tr = $('<tr>');
        // 按原表格的列顺序填充每个单元格
        table.columns().every(function() {
            var cellValue = row[this.dataSrc()];
            tr.append($('<td>').text(cellValue));
        });
        tbody.append(tr);
    });
    tempExportTable.append(tbody);
    
    // 4. 导出这个临时表格
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tempExportTable[0].outerHTML));
});

为什么这样能行？ #

• table.rows({ search: 'applied' }).data()：这个DataTables API会直接返回所有经过搜索过滤后的完整数据集，完全不受当前分页设置的限制。
• 我们用这些数据动态构建了一个包含所有符合条件记录的临时表格，再导出这个表格的HTML，自然就能拿到你想要的全部数据了。

额外方案（嫌手动写麻烦的话） #

如果你不想自己写构建表格的逻辑，也可以用DataTables官方的Buttons插件，它自带的Excel导出功能默认就支持导出所有过滤后的数据。只需要在初始化时加上按钮配置：

var table = $('#resultsTable').DataTable({
    // 你的现有配置...
    "dom": 'Bfrtip', // 配置按钮显示的布局
    "buttons": [
        {
            extend: 'excelHtml5',
            text: '导出Excel',
            exportOptions: {
                modifier: {
                    search: 'applied' // 确保导出的是过滤后的全部数据
                }
            }
        }
    ]
});

不过这个方案需要你额外引入Buttons相关的JS、CSS文件，还有JSZip依赖用来生成标准Excel文件。

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