使用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
相关产品推荐
相关产品推荐

