AgGrid设置ServerSideInfiniteScroll=false导致分页失效求助

核心问题解析 #

当serverSideInfiniteScroll设为false时，AgGrid的服务器端模式会切换为一次性加载全量数据的逻辑，此时getRows方法的params.success回调中传入的总行数参数会被忽略，网格直接将当前返回的行数据长度认定为总行数，导致只能显示单页内容。

针对性解决方案 #

方案1：强制指定总行数实现分页

如果需要一次性加载所有行同时保留分页功能，可按以下步骤操作：

1. 提前通过接口获取完整的总行数，存入变量（如totalRowCount）
2. 在getRows回调中，通过params.success的参数强制传入总行数，同时返回全量行数据：

   getRows(params) {
     // 假设已提前获取到全量数据和总行数
     const fullRowData = yourFetchedFullData;
     const totalRowCount = yourFetchedTotalCount;
   
     params.success({
       rowData: fullRowData,
       rowCount: totalRowCount // 强制传入真实总行数
     });
   }
   

3. 确保网格开启分页配置：

   const gridOptions = {
     serverSideInfiniteScroll: false,
     pagination: true,
     paginationPageSize: 20, // 按需设置每页行数
     getRows: yourGetRowsHandler
     // 其他网格配置项
   };
   

方案2：切换为客户端模式（小数据量场景）

如果数据量不大（如少于1万行），直接使用客户端模式更简单：

• 无需配置getRows，直接将全量数据赋值给rowData
• 开启分页即可自动实现客户端分页：

  const gridOptions = {
    rowData: yourFullRowData,
    pagination: true,
    paginationPageSize: 20
    // 其他网格配置项
  };
  

注意事项 #

• serverSideInfiniteScroll=false时，AgGrid不会触发滚动加载逻辑，所有数据必须一次性返回
• 大数据量场景不建议使用此配置，会导致页面性能下降，建议保留serverSideInfiniteScroll=true通过滚动加载优化体验

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