AgGridReact服务端分页切换页大小后导航摘要显示异常

核心问题 #

服务端分页模式下，AgGrid无法自动确定当前页的结束索引，导致导航摘要出现?。将默认页大小从10改为20后问题暴露，本质是grid未获取到足够的分页范围计算依据。

解决方案 #

根据你的分页实现方式，选择对应处理方案：

方案1：手动分页模式（自行管理API请求） #

如果是手动监听分页事件、调用API后更新rowData，需通过自定义格式化函数强制计算正确范围：

<AgGridReact
  // 基础配置
  pagination={true}
  paginationPageSize={20}
  rowCount={230} // 必须设置为总数据条数
  // 自定义导航摘要格式
  paginationNumberFormatter={(params) => {
    const currentPage = params.paginationGetCurrentPage() + 1; // AgGrid页码从0开始计数
    const pageSize = params.paginationGetPageSize();
    const startIdx = (currentPage - 1) * pageSize + 1;
    // 最后一页取总条数，其余页取当前页*页大小
    const endIdx = Math.min(currentPage * pageSize, params.rowCount);
    return `${startIdx} to ${endIdx} of ${params.rowCount}`;
  }}
  // 其他配置（列定义、rowData等）
/>

关键是确保rowCount设置为总数据量（230），通过格式化函数直接计算起止索引，覆盖grid默认的模糊显示逻辑。

方案2：官方Server-Side Row Model（推荐） #

如果采用AgGrid官方推荐的服务端行模型，需正确配置数据源回调：

<AgGridReact
  rowModelType="serverSide"
  pagination={true}
  paginationPageSize={20}
  serverSideDatasource={{
    getRows: (params) => {
      // 利用AgGrid自动传递的startRow/endRow参数调用API
      fetch(`/your-api-endpoint?start=${params.startRow}&end=${params.endRow}`)
        .then(res => res.json())
        .then(apiResponse => {
          params.success({
            rows: apiResponse.currentPageData, // 当前页数据数组
            rowCount: apiResponse.totalCount // 总数据条数（230）
          });
        })
        .catch(() => params.fail());
    }
  }}
  // 其他配置（列定义等）
/>

这种模式下，AgGrid会自动根据startRow和endRow计算导航摘要的起止索引，只要API返回正确的总条数即可，无需手动处理格式化。

排查要点 #

• 确认rowCount已正确设置为总数据量，无遗漏或动态覆盖
• 检查paginationPageSize是否稳定为20，未被其他代码意外修改
• 手动分页时，确保当前页rowData的长度符合预期（非最后一页应等于页大小）

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