客户端模式AG Grid如何设置初始加载的起始分页

客户端模式（全量数据单次响应返回本地）下不需要调整数据请求逻辑，直接通过组件内置配置和API即可将指定0索引页码设为初始展示页，具体操作如下： #

前置校验：先开启基础分页配置 #

首先确保网格初始化时已经打开分页开关，否则所有分页相关配置都不会生效，基础配置示例：

const gridOptions = {
  // 其余业务配置...
  pagination: true, // 强制开启分页
  paginationPageSize: 15, // 按业务需求设置单页展示行数
  // 不要配置服务端分页、无限滚动相关参数，保持默认的clientSide行模型即可
}

两种实现方案 #

你手里持有的0、1、2格式页码索引和AG Grid分页API的参数规则完全一致，不需要做+1/-1的换算，选以下任意一种方案即可：

方案1：onGridReady回调调用跳页API（推荐，全版本兼容） #

利用网格就绪的生命周期钩子执行跳页，是最稳定的实现方式，不会出现数据未加载导致跳页失效的问题：

const gridOptions = {
  // 保留上述基础分页配置
  onGridReady: (params) => {
    // 替换为你实际需要默认展示的0索引起始页码，例如要默认展示第3页就填2
    const initPageIndex = 2;
    // 数据写入完成后调用跳页API
    params.api.setRowData(yourAllFetchedData).then(() => {
      params.api.paginationGoToPage(initPageIndex);
    })
  }
}

如果你的全量数据是在grid初始化前就已经拿到了，也可以先setRowData再调用paginationGoToPage，逻辑一致。

方案2：直接配置初始页码属性（仅适用于v28及以上版本） #

AG Grid 28及以上版本新增了直接配置初始页码的属性，不需要写生命周期回调，配置更简洁：

const gridOptions = {
  // 保留上述基础分页配置
  paginationPage: 2, // 直接填入目标0索引起始页码即可
}

注意：如果你的全量数据是网格渲染完成后异步拉取再写入的，不要用这个方案，数据写入时会自动重置回第一页，必须用方案1在数据写入完成后再执行跳页。

常见异常排查 #

• 跳页后显示空白：先校验传入的页码索引是否在合法范围内，可通过api.paginationGetTotalPages()获取总页数，合法索引范围是0到总页数-1
• 配置后始终停留在第一页：检查是否误开了服务端分页（serverSide）、无限滚动（infinite）行模型，客户端模式必须使用默认的clientSide行模型
• 异步数据场景下跳页失效：确保跳页逻辑是在setRowData执行完成的回调里触发，不要在数据还没写入网格时就调用跳页API

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