Ag Grid无限滚动分页不触发getRows问题求助

你遇到的问题核心是错误设置了总数据行数rowCount，导致agGrid误以为已经加载完所有数据，因此不再触发后续的getRows请求。

具体问题分析： #

在getRows的回调中，你返回的rowCount是pagination.page * pagination.count，这个值是当前请求页的结束行号，而非后端返回的真实总数据量。agGrid会依据这个值判断是否还有更多数据待加载，当滚动到该rowCount对应的位置时，就会停止触发新请求。

另外，你的分页计算逻辑存在偏移：agGrid的startRow是从0开始计数的，当前计算page的方式会导致页码错误（比如startRow=10时，计算出的page是1，但实际应该对应服务端的第2页）。

解决方案： #

1. 使用后端真实总数据量：在params.success中，将rowCount设置为后端返回的data.totalCount，而非当前页的结束行数值。
2. 修正分页计算逻辑：调整getPagination函数的页码计算方式，确保startRow能对应正确的服务端页码。
3. 移除冗余代码：params.success中的rowCount已能告知agGrid总数据量，无需额外调用gridOptions.api.setRowCount。

修改后的关键代码： #

修正getRows函数：

function createDataSource() {
  return {
    getRows: (params) => {
      console.log(`params start row:${params.startRow}, params end row: ${params.endRow}`);

      var pagination = getPagination(params.startRow, params.endRow);

      console.log(`asking for page ${pagination.page} and count ${pagination.count}`);

      fetch(`http://localhost:5000/api/tickets?page=${pagination.page}&count=${pagination.count}`)
        .then((response) => response.json())
        .then(data => {
          console.log("data received");
          console.log(data);

          // 用后端返回的totalCount作为总行数
          params.success({
            rowData: data.items,
            rowCount: data.totalCount,
          });
        })
        .catch(error => {
          // 处理请求失败场景，避免网格一直处于加载状态
          params.fail();
          console.error('请求失败:', error);
        });
    },
  };
}

修正getPagination函数：

function getPagination(startRow, endRow){
  let pagination = {
    page: 1,
    count: 10
  };

  if(startRow !== undefined && endRow !== undefined){
    const size = endRow - startRow;
    // startRow是0-based，因此页码 = 起始行 / 每页数量 + 1
    const page = (startRow / size) + 1;
    pagination = {
      page: page,
      count: size
    };
  }

  return pagination;
}

额外提示： #

• 确认后端接口的分页参数大小写：你当前使用的是page和count，但示例中是Page和Count（首字母大写），若后端对参数大小写敏感，需保持参数名一致，否则可能返回错误数据。

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