ag-Grid SSRM初始加载默认跳转到指定分页的实现问题

针对你使用ag-Grid Enterprise 31.0.0（原生JS）+ 服务器端行模型（SSRM），需要初始加载直接显示第3页的需求，以下是无需二次请求、且能同步分页UI的解决方案：

核心思路 #

通过初始化时配置分页状态+提前告知网格总记录数，让ag-Grid自动计算目标页的请求参数，避免硬编码或二次请求。

具体实现步骤 #

1. 提前获取总记录数 #

SSRM需要知道总记录数才能正确计算分页参数，所以在初始化网格前，先单独请求一次总条数（或者在第一次数据请求时同时返回总数）。示例代码：

// 请求总记录数
let totalRowCount;
fetch('/api/getTotalRows')
  .then(res => res.json())
  .then(data => {
    totalRowCount = data.total;
    // 拿到总数后再初始化网格
    initGrid();
  });

2. 网格配置中设置初始分页状态 #

在网格的gridOptions里配置分页相关参数，注意ag-Grid的页码是0-indexed（即第1页对应0，第3页对应2）：

const gridOptions = {
  enterpriseLicenseKey: '你的授权密钥',
  rowModelType: 'serverSide',
  pagination: true,
  paginationPageSize: 50, // 对应你每页的条数，示例中为50条/页
  paginationCurrentPage: 2, // 要显示的第3页（0-indexed）
  // 其他常规配置...
};

3. 配置ServerSideDatasource，正确处理请求与回调 #

在getRows方法中，直接使用ag-Grid传入的params.startRow和params.endRow（此时这两个值已经是目标页的正确范围），请求数据后通过successCallback返回数据和总记录数：

gridOptions.serverSideDatasource = {
  getRows(params) {
    // 直接使用params中的分页参数，无需硬编码
    fetch(`/api/getData?startRow=${params.startRow}&endRow=${params.endRow}`)
      .then(res => res.json())
      .then(data => {
        // 回调时传入数据和总记录数，让网格同步分页导航状态
        params.successCallback(data.rows, totalRowCount);
      })
      .catch(err => {
        params.failCallback();
      });
  }
};

4. 初始化网格 #

确保在拿到总记录数后再初始化网格，这样ag-Grid能基于总数和初始页码计算正确的请求参数：

function initGrid() {
  const gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
}

关键说明 #

• 避免使用onFirstDataRendered调用paginationGoToPage：该方法会先加载第1页数据，再触发跳转请求，导致二次加载，且无法直接跳转到未访问过的页码。
• 不要硬编码startRow/endRow：硬编码会导致后续分页请求都使用固定范围，破坏正常分页逻辑。
• 总记录数是核心前提：ag-Grid需要总条数来计算页码对应的行范围，必须在初始化前或第一次请求时明确告知。

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