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

AG Grid SSRM模式下能否获取总行数?React服务端分页技术问询

AG Grid React服务端分页:获取总行数并传入successCallback

在AG Grid的服务端分页模式下,无法直接从getRows的params或gridApi中获取总行数——因为服务端模式的核心是由开发者负责数据的获取与总行数的维护,AG Grid本身不会存储这个全局总行数,它仅依赖你通过successCallback传入的值来计算分页逻辑。

解决方案:自行维护总行数状态

你需要在React组件中维护一个总行数的状态,初始从后端获取后存入状态,后续操作(比如新增行)时同步更新这个状态,再传入successCallback。

修正后的代码示例:

// 在组件中维护总行数的state
const [totalRowCount, setTotalRowCount] = useState(0);

// 初始加载时从后端获取总行数并设置
// 示例:const { data, total } = await fetchInitialServerData();
// setTotalRowCount(total);

const updatedDataSource = (newRows) => {
  return {
    getRows: (params) => {
      // 将维护的总行数传入successCallback
      params.successCallback(newRows, totalRowCount);
    },
  };
};

// 新增行时同步更新总行数与数据源
const handleAddRow = () => {
  // 假设newRows为第1页数据加上新增行
  const newRows = [...currentPageRows, newRow];
  // 总行数+1
  setTotalRowCount(prev => prev + 1);
  // 重新设置数据源
  const ds = updatedDataSource(newRows);
  gridApi.setServerSideDatasource(ds);
};

注意事项

  • 所有影响总行数的操作(删除行、后端数据同步更新等),都需要同步更新totalRowCount状态,否则AG Grid的分页计算会出现偏差。
  • 如果需要获取后端最新的总行数(比如其他用户修改了数据),可以调用后端接口拿到最新值后更新状态,再刷新数据源。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.12 15:25:21