Angular 4中AG Grid无限滚动分页：网格就绪时跳转指定页的方法

当然可以实现！不过因为无限滚动的机制和常规分页逻辑不同，得注意几个关键细节，下面我一步步给你讲清楚怎么在Angular 4里落地：

核心逻辑梳理 #

无限滚动模式下，AG Grid不会预先加载所有页面的数据，而是按需请求。所以跳转到指定页面的核心是：先算出目标页面对应的起始行索引，然后通过Grid API触发该行的加载（如果还没加载的话），同时滚动到对应位置。

具体实现步骤 #

1. 先拿到Grid API的引用 #

在组件模板里绑定gridReady事件，把API实例存下来：

<ag-grid-angular
  #agGrid
  [columnDefs]="columnDefs"
  [rowModelType]="'infinite'"
  [pagination]="true"
  [paginationPageSize]="10"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

组件类里保存API：

private gridApi: any;
private gridColumnApi: any;

onGridReady(params: any) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
  // 网格就绪后直接调用跳转方法，比如跳转到第5页
  this.jumpToTargetPage(5);
}

2. 实现跳转指定页面的方法 #

注意：无限滚动模式下直接用paginationGoToPage()可能不稳定（因为依赖已加载的页面数据），更可靠的方式是通过滚动到目标行触发数据加载：

jumpToTargetPage(targetPage: number) {
  const pageSize = this.gridApi.paginationGetPageSize();
  // 计算目标页面的第一行索引（AG Grid行索引从0开始）
  const targetRowIndex = (targetPage - 1) * pageSize;
  
  // 确保目标行可见，AG Grid会自动加载该行所在页面的数据
  this.gridApi.ensureIndexVisible(targetRowIndex, 'top');
  
  // 可选：手动同步分页指示器的显示（AG Grid内部页码从0开始）
  this.gridApi.paginationSetCurrentPage(targetPage - 1);
}

3. 关键注意事项 #

• 确保你的数据源配置正确，能接收startRow和endRow参数从服务器拉取对应数据：

  this.gridApi.setDatasource({
    getRows: (params: any) => {
      // 调用后端接口，根据startRow和endRow获取分页数据
      yourServerService.fetchRows(params.startRow, params.endRow)
        .then(response => {
          params.successCallback(response.rows, response.totalRowCount);
        })
        .catch(() => params.failCallback());
    }
  });
  

• 目标页面的行索引必须在服务器返回的totalRowCount范围内，否则AG Grid不会触发加载请求。
• 如果目标页面的数据已经加载过，ensureIndexVisible()会直接滚动到对应位置；如果没加载过，会先调用getRows拉取数据，再完成滚动。

额外小提示 #

如果你的场景中目标页面的数据恰好被预加载过，直接调用paginationGoToPage(targetPage - 1)也能生效，但在严格的无限滚动场景下，还是推荐用ensureIndexVisible()的方式，它能确保数据加载和滚动的可靠性。

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