Datatable排序编号异常及导出后分页异常问题求助

问题1：导出结果中编号排序混乱 #

问题根源 #

1. 你之前在原始数据里预生成的count2是按遍历顺序生成的，但Datatable如果存在排序、筛选操作，表格渲染的行顺序会和原始数据不一致，导致编号与实际显示的行不匹配；
2. 导出时调用table.page.len(-1).draw()是异步渲染操作，你直接紧接着获取outerHTML，此时表格可能还未加载完成所有数据，导致导出内容顺序混乱。

修复方案 #

• 放弃在原始数据中预生成编号，改用Datatable自带的meta.row参数在渲染时生成当前行的索引（加1转为从1开始的编号），确保编号与表格显示顺序完全一致；
• 导出时等待全量数据渲染完成后再获取HTML，通过draw.dt事件监听渲染完成状态，避免异步加载导致的内容异常。

问题2：导出后分页下拉框空白、页面行数异常 #

问题根源 #

导出函数中错误地将table.page.info().pages（总页数）作为每页显示条数传给page.len()方法，但该方法需要传入的是每页行数而非总页数。传入一个不在分页预设选项中的数值时，下拉框会显示空白，同时表格会强制显示对应条数的行。

修复方案 #

• 导出前先保存当前的每页显示条数（table.page.info().length），导出完成后恢复该数值即可。

修改后的完整代码 #

HTML（无改动）

<table id="table2">
    <thead>
        <tr>
            <th>Not Found in Grand</th>
        </tr>
    </thead>
</table>

JS代码

var result2 = [];
$.each(response.not_found, function(k1, v1) {
    if (v1.router != null){
        var obj = {};
        obj['result_not_found'] = v1.router;
        // 移除预生成count2的逻辑
        result2.push(obj);
    }
});
resultTable2(result2);

function resultTable2(result2){
    $('#table2').DataTable({
        buttons: [{
            action: function () {
                exportNotFound();
            },
        }],
        columns: [
            {
                "data": "result_not_found",
                render: function(data, type, row, meta) {
                    // 用meta.row获取当前行索引，+1转为从1开始的编号
                    var rowNum = meta.row + 1;
                    var a = "<table>";
                        a += "<tr><td><span>("+rowNum+")</span>SERVICE NO:</td><td>"+data.service_number+"</td></tr>";
                        a += "<tr><td>MSE ID:</td><td>"+data.mse_id+"</td></tr>";
                        a += "<tr><td>MSE INTERFACE:</td><td>"+data.mse_interface+"</td></tr>";
                        a += "<tr><td>VLAN:</td><td>"+data.vlan+"</td></tr>";
                        a += "<tr><td>BANDWIDTH:</td><td>"+data.bandwidth+"</td></tr>";
                    return a + "</table></br>";
                }
            }
        ],
    });
}

function exportNotFound() {
    var BOM = "\uFEFF";
    var table = $('#table2').DataTable();
    // 保存原始每页显示条数
    var originalLength = table.page.info().length;
    var exportDone = false;

    // 监听单次draw事件，确保全量数据渲染完成后再导出
    table.one('draw.dt', function() {
        if (!exportDone) {
            exportDone = true;
            var html = $("#table2")[0].outerHTML;
            // 恢复原始分页设置
            table.page.len(originalLength).draw();
            window.open('data:application/vnd.ms-excel,' + encodeURI(BOM + html));
        }
    });

    // 切换为显示所有数据
    table.page.len(-1).draw();
}

关键改动说明 #

1. 编号生成逻辑：改用meta.row + 1生成行编号，确保编号与表格当前显示顺序完全匹配，不受排序、筛选操作影响；
2. 异步渲染处理：通过table.one('draw.dt')监听全量数据渲染完成事件，避免提前获取HTML导致的内容异常；
3. 分页恢复逻辑：保存并恢复原始的每页显示条数，不再误用总页数，彻底修复分页下拉框空白和行数异常问题。

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