Tabulator 5.0 启用远程分页后运行异常问题咨询

问题根本原因 #

你的猜测完全正确，报错就是ajaxResponse函数只返回response.results导致的，同时还有一处配置缺失：

1. 远程分页模式下，Tabulator必须从完整的接口响应中读取总页数、数据列表等分页必要信息，你直接剥离外层响应仅返回数据数组，导致Tabulator找不到你配置的total_pages字段。
2. 你仅在dataReceiveParams中配置了总页数字段的映射，没有配置数据列表的字段映射，Tabulator默认会查找响应中的data字段获取行数据，你的接口数据列表存放在results字段中，缺少对应配置。

修复方案 #

1. 修正Tabulator初始化配置

删除多余的ajaxResponse配置，补全dataReceiveParams的数据字段映射：

var table = new Tabulator("#account-tran-detail-table", {
    pagination:true,
    paginationMode:"remote",
    paginationSize: 12,
    dataSendParams:{
        page: "page",
        size: "page_size",
    },
    dataReceiveParams:{
        last_page:"total_pages",
        data: "results" // 新增：指定行数据从响应的results字段读取
    }
    // 移除原有的ajaxResponse配置
});

2. 修正其他错误逻辑

• 删除generateReport函数中无效的$("#tableBuilt").destroy;代码，tableBuilt是Tabulator的事件名，不是DOM元素ID，该行代码无任何作用。
• 移除table.on("tableBuilt", function(){table.setColumns(columns);})监听：columns变量仅在generateReport函数中定义，表格初始化时columns为undefined会导致报错；建议将table.setColumns(columns)直接放在generateReport函数中columns定义完成之后。

修正后的generateReport函数参考：

function generateReport () {
    table.clearData();
    var columns = [
            {title:"id", field:"id", headerFilter:false, visible:false, download:true},
            {title:"name", field:"name", headerFilter:false, visible:false, download:true},
        ];
    table.setColumns(columns); // 调整列配置的位置
    var gender = "m";
    var url = "/api/v1/myendpointname/";
    var append_params = "?gender=" + gender;
    table.setData(url + append_params);
};

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