如何基于Ag-grid实现分页数据批量加载（非一次性全量获取）？

嗨，这个需求AG Grid其实早就给你准备好了成熟的方案——服务器端分页（Server-Side Pagination），完美匹配你要的“按需加载指定页数据”的场景。我给你一步步拆解怎么实现：

首先得在AG Grid的配置里开启服务器端数据源模式，核心就是加一行：

rowModelType: 'serverSide'

设置完这个，Grid就不会一次性加载所有数据了，而是会根据用户的分页操作，主动向你要对应页的数据。

接下来你需要定义一个serverSideDatasource，里面的getRows方法是关键。当用户切换到第10页时，AG Grid会自动把当前页的起始行、结束行等参数传给这个方法，你就可以用这些参数去请求后端接口，精准获取第11-20行（也就是第10页）的数据。

给你个实际代码例子（用原生JS举例，React/Vue版本逻辑一致）：

const myDatasource = {
  getRows(params) {
    // 从AG Grid的请求参数里解析出页码和每页条数
    const pageSize = params.request.endRow - params.request.startRow;
    const currentPage = (params.request.startRow / pageSize) + 1;

    // 调用你的后端接口，把分页参数传过去
    fetch(`/api/your-data?page=${currentPage}&pageSize=${pageSize}`)
      .then(res => res.json())
      .then(response => {
        // 假设后端返回{ totalCount: 1000, data: [...] }
        params.success({
          rowData: response.data, // 把当前页的数据传给Grid
          rowCount: response.totalCount // 告诉Grid总共有多少条数据，用来生成分页器
        });
      })
      .catch(err => {
        params.fail(); // 请求失败时通知Grid
        console.error('数据加载失败:', err);
      });
  }
};

// 把数据源绑定到Grid上
gridApi.setServerSideDatasource(myDatasource);

别忘了在Grid配置里开启分页功能，指定每页显示的条数：

pagination: true,
paginationPageSize: 10, // 这里设置成10，刚好对应你说的每页10条数据

• 如果之后需要加筛选、排序功能，params.request里还会包含filterModel、sortModel这些参数，你可以把它们一起传给后端，实现带条件的分页加载。
• 不管你用的是AG Grid的哪个框架版本（React/Vue/Angular），核心逻辑都是这三步，只是组件化的写法略有不同，照着对应版本的示例套就行。

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