ag-grid中能否通过rowModelType实现服务端分页+客户端过滤？

单纯通过切换rowModelType的serverSide或clientSide无法直接实现服务端分页与客户端过滤的组合，因为这两种行模型的设计目标不同：

• serverSide模型默认将分页、过滤、排序等操作都委托给服务端处理
• clientSide模型默认在客户端处理所有数据操作，分页也是客户端本地完成

以下是两种可行的实现方案：

方案一：基于Server-Side Row Model改造实现 #

通过配置Server-Side模型的本地缓存，并禁用服务端过滤，手动实现客户端过滤逻辑：

1. 核心配置

   • 设置rowModelType: 'serverSide'，同时开启serverSideStoreType: 'full'（将所有加载的数据缓存到本地）
   • 禁用服务端过滤：suppressServerSideFilter: true
   • 启用客户端分页：pagination: true并设置paginationPageSize
   • 自定义客户端过滤逻辑，通过isExternalFilterPresent和doesExternalFilterPass实现

2. 代码示例

const gridOptions = {
  rowModelType: 'serverSide',
  serverSideStoreType: 'full',
  suppressServerSideFilter: true,
  pagination: true,
  paginationPageSize: 10,
  // 标记存在外部过滤条件
  isExternalFilterPresent: () => true,
  // 自定义过滤规则，判断行数据是否符合条件
  doesExternalFilterPass: (node) => {
    const filterModel = gridOptions.api.getFilterModel();
    // 示例：根据快速过滤文本匹配名称字段
    const filterText = filterModel.quickFilter?.filter?.toLowerCase();
    if (!filterText) return true;
    return node.data.name.toLowerCase().includes(filterText);
  },
  // 加载全量数据的数据源配置
  serverSideDatasource: {
    getRows(params) {
      // 从服务端请求全量数据（数据量不大时适用）
      fetch('/api/full-data')
        .then(res => res.json())
        .then(data => {
          params.success({ rowData: data, rowCount: data.length });
        })
        .catch(() => params.fail());
    }
  }
};

方案二：基于Client-Side Row Model手动处理分页 #

使用Client-Side模型默认的客户端过滤能力，手动实现服务端分页的请求逻辑：

1. 核心配置

   • 设置rowModelType: 'clientSide'
   • 禁用客户端默认分页：pagination: false
   • 启用客户端过滤：enableFilter: true
   • 手动实现分页控件，监听分页切换事件，请求对应页的服务端数据

2. 代码示例

let currentPage = 1;
const PAGE_SIZE = 10;
let totalPages = 0;

const gridOptions = {
  rowModelType: 'clientSide',
  pagination: false,
  enableFilter: true,
  onGridReady: (params) => {
    // 初始化加载第一页数据
    loadPage(currentPage);
  }
};

// 加载指定页的服务端数据
function loadPage(pageNum) {
  fetch(`/api/data?page=${pageNum}&pageSize=${PAGE_SIZE}`)
    .then(res => res.json())
    .then(response => {
      gridOptions.api.setRowData(response.rows);
      totalPages = response.totalPages;
      currentPage = pageNum;
      // 更新自定义分页控件的状态（比如页码、总页数）
      updatePaginationUI();
    });
}

// 分页控件切换事件示例
function handlePageChange(newPage) {
  if (newPage >= 1 && newPage <= totalPages) {
    loadPage(newPage);
  }
}

注意事项 #

• 方案一适合数据量较小的场景，全量加载后客户端过滤无性能压力；如果数据量极大，建议优先考虑服务端过滤+分页
• 方案二中，客户端过滤仅对当前页的数据生效，如果需要跨页过滤，仍需将过滤条件发送到服务端返回匹配的所有数据后再做客户端分页

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