Ag-Grid paginationGoToPage失效问题（服务端行模型/无限滚动场景）

在React中实现Ag-Grid，通过URL查询参数控制过滤、排序和分页功能，目前过滤、排序均正常工作，但api.paginationGoToPage()方法完全无效——即使硬编码页码也无法触发页面跳转。尝试将分页逻辑移到服务端数据源函数后，目标页数据能正常显示，但分页控件仍停留在第一页，无法同步网格的分页状态。

相关实现代码：

useEffect(() => {
    if (gridRef?.current.api) {
      gridRef.current.api.setServerSideDatasource(datasource)
    }
  }, [gridRef, datasource, watchedValues])

  const onGridReady = event => {
    const { api, columnApi } = event

    api.setServerSideDatasource(datasource)

    if (initialParams && initialParams.filterModel) {
      api.setFilterModel(initialParams.filterModel)
    }

    if (initialParams && initialParams.sortModel) {
      columnApi.applyColumnState({
        state: initialParams.sortModel,
        defaultState: { sort: null },
      })
    }

    if (initialParams && initialParams.startRow) {
      api.paginationGoToPage(Math.floor(initialParams.startRow / 50))
    }

    if (sizeToFit) {
      api.sizeColumnsToFit()
    }
  }

1. 调整分页API的调用时机 #

在服务端数据源模式下，paginationGoToPage()必须等网格获取到总数据条数后调用——Ag-Grid需要知道总页数才能计算页码对应的位置，过早调用会因总条数未加载而失效。

可以把分页跳转逻辑放到服务端数据源的success回调中，确保数据加载完成后再执行：

const onGridReady = event => {
  const { api, columnApi } = event;

  // 重构数据源，在数据返回后处理分页
  const datasource = {
    getRows(params) {
      fetch('/your-api-endpoint', {
        method: 'POST',
        body: JSON.stringify(params.request)
      })
      .then(res => res.json())
      .then(data => {
        params.success({
          rowData: data.rows,
          rowCount: data.totalCount // 必须返回总数据条数
        });
        // 数据加载完成后执行分页跳转
        if (initialParams && initialParams.startRow) {
          const targetPage = Math.floor(initialParams.startRow / 50);
          api.paginationGoToPage(targetPage);
        }
      });
    }
  };

  api.setServerSideDatasource(datasource);

  // 保留原有的过滤、排序逻辑
  if (initialParams && initialParams.filterModel) {
    api.setFilterModel(initialParams.filterModel);
  }

  if (initialParams && initialParams.sortModel) {
    columnApi.applyColumnState({
      state: initialParams.sortModel,
      defaultState: { sort: null },
    });
  }

  if (sizeToFit) {
    api.sizeColumnsToFit();
  }
};

2. 检查分页基础配置 #

确保Ag-Grid已正确开启分页，且分页大小和你计算页码时的除数一致：

<AgGridReact
  pagination={true}
  paginationPageSize={50} // 必须和startRow/50的除数保持一致
  // 其他配置项...
/>

3. 避免重复设置数据源导致状态重置 #

你的代码中useEffect和onGridReady都调用了setServerSideDatasource，可能导致网格状态被重置。可以移除useEffect中的数据源设置，仅在onGridReady中初始化一次；或改为在依赖变化时刷新数据而非重置数据源：

useEffect(() => {
  if (gridRef?.current.api && watchedValues) {
    // 仅在依赖变化时刷新数据，不重置数据源
    gridRef.current.api.refreshServerSideStore({ purge: true });
  }
}, [gridRef, watchedValues]);

4. 强制同步分页控件状态 #

如果上述方法仍无效，可以尝试用setPaginationCurrentPage强制设置当前页码（部分Ag-Grid版本支持该API）：

if (initialParams && initialParams.startRow) {
  const targetPage = Math.floor(initialParams.startRow / 50);
  api.setPaginationCurrentPage(targetPage);
  // 触发数据刷新以同步内容
  api.refreshServerSideStore({ purge: true });
}

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