如何利用AG Grid Community实现带page/page_size/count的远程API分页？

核心思路 #

通过AG Grid的分页配置与事件监听，在页码/每页条数变化时发起远程API请求，将返回的数据集和总条数同步到表格中，实现标准分页逻辑。

具体实现步骤 #

1. 基础配置表格分页 #

初始化AG Grid时开启分页，并设置默认每页条数：

const gridOptions = {
  // 开启分页
  pagination: true,
  // 默认每页条数，对应API的page_size
  paginationPageSize: 10,
  // 允许用户调整每页条数（可选）
  paginationPageSizeSelector: [10, 20, 50],
  // 你的列定义
  columnDefs: [
    { field: 'id' },
    { field: 'name' },
    // 其他列配置...
  ]
};

2. 监听分页事件，发起API请求 #

通过paginationChanged事件捕获页码或每页条数的变化，触发远程API调用：

gridOptions.paginationChanged = function(params) {
  const currentPage = params.newPage;
  const pageSize = params.paginationPageSize;

  // 调用你的远程API，传递分页参数
  fetch(`your-api-endpoint?page=${currentPage}&page_size=${pageSize}`)
    .then(res => res.json())
    .then(apiData => {
      // 更新表格数据列表
      params.api.setRowData(apiData.results);
      // 设置总条数，第二个参数false表示不重置当前页码
      params.api.setRowCount(apiData.count, false);
    })
    .catch(err => console.error('分页数据加载失败:', err));
};

3. 初始化加载第一页数据 #

在表格初始化完成后，手动触发第一页数据的加载：

document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.querySelector('#ag-grid-container');
  new agGrid.Grid(gridDiv, gridOptions);

  // 加载初始页数据
  fetch(`your-api-endpoint?page=1&page_size=${gridOptions.paginationPageSize}`)
    .then(res => res.json())
    .then(apiData => {
      gridOptions.api.setRowData(apiData.results);
      gridOptions.api.setRowCount(apiData.count, false);
    });
});

关键说明 #

• setRowCount(totalCount, keepCurrentPage)：这就是你需要的设置总行数的API，传入返回的count值后，AG Grid会自动计算总页数并更新分页控件。
• 若你的API页码从0开始，需要将currentPage转换为currentPage - 1后再传递给接口。
• 分页控件的状态会自动根据总条数和当前页更新，无需手动处理分页按钮的禁用/启用逻辑。

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