You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用AG-Grid社区版实现服务端分页遇报错:需AG-Grid企业版

AG-Grid社区版实现服务端分页的解决方案

rowModelType = 'serverSide'是AG-Grid企业版的专属功能,社区版不支持该配置,这就是你触发提示的原因。社区版可以通过以下两种方式实现服务端分页:

方式一:使用无限滚动行模型(推荐)

设置rowModelType = 'infinite',配合datasource配置实现服务端数据加载,表格会在需要数据时自动触发请求:

const gridOptions = {
  rowModelType: 'infinite',
  pagination: true,
  paginationPageSize: 10, // 自定义每页条数
  datasource: {
    getRows(params) {
      // 从params中获取分页范围:startRow是起始行索引,endRow是结束行索引
      const start = params.startRow;
      const end = params.endRow;

      // 调用后端分页接口
      fetch(`/your-api-endpoint?start=${start}&end=${end}`)
        .then(response => response.json())
        .then(result => {
          // 用successCallback返回数据,第二个参数是总条数(用于计算总页数)
          params.successCallback(result.rows, result.totalRowCount);
        })
        .catch(() => {
          params.failCallback();
        });
    }
  }
};

方式二:手动管理分页(传统页码切换)

保持默认的clientSide行模型,自己维护分页参数,手动触发数据请求:

let currentPage = 1;
const pageSize = 10;

// 加载指定页数据
function loadPage(pageNum) {
  fetch(`/your-api-endpoint?page=${pageNum}&pageSize=${pageSize}`)
    .then(response => response.json())
    .then(result => {
      // 更新表格数据
      gridOptions.api.setRowData(result.rows);
      // 这里可以自行更新分页控件的状态(比如总页数、当前页码显示)
    });
}

// 初始化加载第一页
loadPage(currentPage);

// 页码切换示例(比如点击下一页按钮)
document.getElementById('next-page-btn').addEventListener('click', () => {
  currentPage++;
  loadPage(currentPage);
});

注意:社区版不支持企业版serverSide模型自带的过滤、排序、分组与后端联动的自动处理能力,如果需要这些功能,要么在请求时手动拼接对应参数,要么考虑升级到AG-Grid企业版。

内容的提问来源于stack exchange,提问作者shmuel ko

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.23 13:38:08