Tabulator远程AJAX分页中设置last_row与last_page值的问题

问题 #

在Tabulator中使用远程AJAX分页加载数据，后端基于Elasticsearch，希望每页返回10条结果，并通过last_page和last_row更新前端分页UI，但操作后出现错误：tabulator.min.js:2 Data Loading Error - Unable to process data due to invalid data type。

当前Tabulator配置：

var table = new Tabulator("#example-table", {
        ajaxURL: "myurl",
        filterMode:"remote", //enable remote filtering
        pagination:"remote", //enable remote pagination
        sortMode:"remote", //enable remote sorting
        paginationSize:10, //set page size
        paginationSizeSelector:[10, 25, 50, 100],
        movableColumns:true,
        paginationCounter:"rows",
        layout:"fitColumns", //fit columns to width of table (optional)
        resizableColumnFit:true, //resize columns to fit table width
        columns:[ 
            // Defined my columns here
        ],
        ajaxResponse:function(url, params, response){
            return response.data; 
        },
        ajaxURLGenerator:function(url, config, params){
            return url + "?params=" + encodeURI(JSON.stringify(params)); //encode parameters as a json object
        },
    });

Python后端响应代码：

return JsonResponse({
            "last_page": int(res_count // size + 1),
            "last_row": int(res_count),
            "data": res
        })

尝试在ajaxResponse中添加last_page和last_row未成功，询问是否需要额外存储这些值再手动更新。

解决方案 #

错误原因 #

Tabulator远程分页不需要直接传入last_page或last_row，它依赖总数据条数自动计算总页数、最后一行等分页参数。之前仅返回当前页数据，未提供总条数，导致Tabulator无法处理分页逻辑，抛出数据类型错误。

修复步骤 #

1. 修改后端响应，返回总数据条数
   用total字段返回总记录数（直接复用已有的res_count），删除last_page和last_row字段：

   return JsonResponse({
       "total": int(res_count),
       "data": res
   })
   

2. 修改Tabulator的ajaxResponse函数，设置总数据量
   在返回当前页数据前，调用setDataCount方法告知Tabulator总条数，它会自动更新分页UI：

   ajaxResponse:function(url, params, response){
       // 设置总数据条数，Tabulator自动计算总页数等参数
       table.setDataCount(response.total);
       // 返回当前页的数据
       return response.data; 
   },
   

3. 无需额外存储分页参数
   Tabulator会根据total和paginationSize自动计算last_page、last_row，并同步更新分页控件，不需要手动存储或更新这些值。

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