DataTables服务端模式下popstate事件分页异常问题求助

问题现象 #

开启serverSide模式的DataTables中，通过popstate事件加载历史状态重绘表格时出现异常：

• 从仅1页的状态回退到需加载第2页的历史状态时，表格只会加载第1页；
• 从≥2页的状态回退到第2页时，功能完全正常。

原因分析 #

经排查，问题源于DataTables的page()方法特性：当尝试设置不存在的分页时，不会抛出错误，而是自动重置到第1页。
在服务端模式下，DataTables必须完成一次绘制请求后，才能从服务端返回的结果中获取总页数。因此当我们直接设置目标页码并执行draw()时，表格此时还不知道该页码是否存在，就会触发重置逻辑，导致页码失效。

解决方案 #

通过分两次执行draw()来解决：

1. 第一次draw()：先应用搜索、排序、每页条数等参数，触发服务端请求，让表格获取到正确的总页数；
2. 第二次draw()：在表格已知总页数的前提下，设置目标页码并再次绘制，确保页码有效不会被重置。

修改后的代码 #

$(document).ready(function() {
    myTable.on("draw", function() {
        setState(); // history.replaceState or history.pushState
        saveTableOrder(); // 保存到localStorage
        saveTableLength(); // 保存到localStorage
    });
    
    $(window).on("popstate", function() {
        // 第一步：先同步基础参数，获取总页数
        myTable
            .search(loadTableSearch()) // 从history.state加载
            .order(loadTableOrder()) // 从history.state或localStorage加载
            .page.len(loadTableLength()) // 从history.state或localStorage加载
            .draw(false, function() {
                // 第二步：绘制完成后设置目标页码，再执行绘制
                myTable.page(loadTablePage()-1).draw(false);
            });
    });
});

优化说明 #

使用draw()的回调函数执行第二次绘制，可以避免同步执行两次draw()可能导致的冗余请求，确保在第一次绘制完成（服务端数据返回，总页数已更新）后再设置页码。

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