如何在ag-grid中保存并恢复当前页面？无限行模型下分页状态初始化无效问题咨询

我之前在使用ag-grid的无限行模型+分页功能时，也碰到过和你一模一样的问题——在mounted或者onGridReady里调用paginationGoToPage完全没效果，网格总是默认回到第一页。后来摸索出几个关键的解决点，分享给你：

• 别在onGridReady里直接调用跳转方法
  无限行模型的初始化逻辑和普通行模型不一样，onGridReady触发时，分页系统还没完成数据加载的准备工作，这时候调用页面跳转指令根本不会被处理。你需要监听firstDataRendered事件，这个事件会在网格第一次渲染完数据后触发，此时分页组件已经完全就绪。

  举个Vue里的例子（React/Angular逻辑类似）：

  // 假设你从缓存里拿到了之前保存的页码savedPage（注意ag-grid的页码是0-based！）
  methods: {
    onFirstDataRendered(params) {
      // 只有保存的页码不是第一页时才跳转
      if (this.savedPage !== 0) {
        params.api.paginationGoToPage(this.savedPage);
      }
    }
  }
  

  然后在ag-grid的配置里绑定这个事件：

  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowModelType="'infinite'"
    :pagination="true"
    :paginationPageSize="10"
    :datasource="datasource"
    @first-data-rendered="onFirstDataRendered"
    @grid-ready="onGridReady"
  ></ag-grid-vue>
  

• 确认页码的计数规则
  很多人会在这里踩坑：用户看到的页面是1-based（比如第一页显示“1”），但ag-grid的paginationGoToPage接受的参数是0-based的。如果你保存的是用户看到的页码，一定要先减1再传进去，不然会跳错页。

• 检查数据源的getRows实现
  跳转页码后，要确保你的datasource.getRows方法能正确根据参数里的startRow和endRow请求对应页的数据。比如当跳转到第2页（0-based的1），pageSize是10的话，startRow就是10，endRow就是20，你的后端接口要能正确返回这个范围的数据。

• 避免重复跳转（可选）
  如果是从详情页返回列表页的场景，可以加个判断，只有当组件是从详情页返回而非首次加载时才执行跳转，避免不必要的请求。

按照这个逻辑来，应该就能正确恢复之前的分页状态了。

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