Angular AG Grid服务端分页：如何跳转到指定页面？

核心思路 #

服务端分页模式下，AG Grid不会缓存全量数据，paginationGoToPage()仅能操作已加载的本地数据，因此无法直接生效。必须通过持久化当前页码 + 初始化时主动请求对应页数据 + 同步AG Grid分页状态的组合方式实现需求。

步骤1：持久化当前页码 #

在用户切换页码或编辑完成后，将当前页码保存到持久化存储，推荐两种场景适配的方式：

• 路由参数（推荐）：适合需要分享页面链接的场景，刷新或跳转后参数不会丢失。
• LocalStorage/SessionStorage：适合无需分享链接，仅在当前浏览器会话保留的场景。

示例代码（路由参数方式）：

// 监听AG Grid页码变化事件，同步到路由参数
onGridReady(params: GridReadyEvent) {
  this.gridApi = params.api;
  params.api.addEventListener('paginationChanged', (event) => {
    const currentPage = event.api.paginationGetCurrentPage();
    // AG Grid页码从0起始，业务通常用1起始，按需转换
    this.router.navigate([], {
      queryParams: { page: currentPage + 1 },
      queryParamsHandling: 'merge'
    });
  });
}

// 编辑完成后，更新当前页码到路由（若编辑后页码未变可省略）
onEditSuccess() {
  const currentPage = this.gridApi.paginationGetCurrentPage();
  this.router.navigate([], {
    queryParams: { page: currentPage + 1 },
    queryParamsHandling: 'merge'
  });
}

示例代码（LocalStorage方式）：

// 页码变化时保存到LocalStorage
onPaginationChanged(event: PaginationChangedEvent) {
  localStorage.setItem('agGridCurrentPage', event.api.paginationGetCurrentPage().toString());
}

// 编辑成功后同步当前页码
onEditSuccess() {
  const currentPage = this.gridApi.paginationGetCurrentPage();
  localStorage.setItem('agGridCurrentPage', currentPage.toString());
}

步骤2：初始化时恢复页码并加载对应页数据 #

组件初始化阶段，读取保存的页码，默认回退到第1页（AG Grid对应0起始页码），然后调用服务端接口请求对应页数据，同步AG Grid的分页状态。

ngOnInit() {
  // 读取路由参数中的页码（转换为AG Grid的0起始格式）
  const pageParam = this.route.snapshot.queryParamMap.get('page');
  let targetPage = pageParam ? parseInt(pageParam) - 1 : 0;

  // 若使用LocalStorage，替换为以下逻辑：
  // const savedPage = localStorage.getItem('agGridCurrentPage');
  // let targetPage = savedPage ? parseInt(savedPage) : 0;

  // 请求服务端对应页数据，传入页码、每页条数等参数
  this.dataService.fetchPageData(targetPage + 1, this.pageSize).subscribe((res) => {
    // 设置AG Grid数据源
    this.gridApi.setRowData(res.dataList);
    // 设置总记录数，让AG Grid正确渲染分页控件
    this.gridApi.setRowCount(res.totalRecords);
    // 同步当前页码到AG Grid
    this.gridApi.paginationSetCurrentPage(targetPage);
  });
}

关键注意事项 #

• 注意AG Grid的0起始页码与业务接口常用的1起始页码转换，避免请求错误页。
• 服务端接口必须返回totalRecords（总记录数），否则AG Grid无法正确生成分页控件。
• 若编辑操作导致当前页数据量变化（比如删除记录），需重新请求当前页数据，确保数据最新。
• 路由参数方式需处理非法参数（如非数字页码），默认回退到第1页。

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