Angular Ag-Grid：如何在行数超过指定阈值后显示分页面板

这个需求完全可以实现，AG-Grid虽然没有直接提供对应配置项，但可以通过监听数据变化事件+调用API动态控制分页状态来达成。以下是具体实现方案：

核心思路 #

通过监听表格数据的变化（包括初始加载、数据新增/删除、过滤排序等操作），实时计算当前行数，与自定义阈值对比，动态开启或关闭分页功能——分页关闭时，分页面板会自动隐藏；开启时则显示。

具体实现步骤 #

1. 配置基础参数

   • 初始将pagination设为false（避免默认显示分页面板）
   • 添加自定义属性customPaginationLimit设置行数阈值（比如10）
   • 绑定关键事件：gridReady（初始加载判断）、rowDataChanged（数据增删时触发）、modelUpdated（过滤/排序导致行数变化时触发）

2. 编写判断逻辑函数
   封装一个函数，用于判断当前行数是否超过阈值，并调用AG-Grid API切换分页状态。

代码示例（纯JS） #

// 表格配置
const gridOptions = {
  columnDefs: [/* 你的列配置 */],
  rowData: [],
  pagination: false, // 初始关闭分页
  customPaginationLimit: 10, // 自定义阈值：行数超过10才显示分页
  // 表格初始化完成时执行判断
  onGridReady: (params) => {
    checkPaginationStatus(params.api);
  },
  // 行数据增删时触发判断
  onRowDataChanged: (params) => {
    checkPaginationStatus(params.api);
  },
  // 过滤/排序导致行数变化时触发判断
  onModelUpdated: (params) => {
    checkPaginationStatus(params.api);
  }
};

// 核心判断函数
function checkPaginationStatus(gridApi) {
  // 获取当前显示的行数（如果有过滤，用这个；无过滤可改用gridApi.getRowCount()）
  const currentRowCount = gridApi.getDisplayedRowCount();
  const limit = gridApi.gridOptions.customPaginationLimit;
  // 动态切换分页状态
  gridApi.setPagination(currentRowCount > limit);
}

补充说明 #

• 若不需要考虑过滤、排序后的行数变化，可去掉onModelUpdated事件监听
• getDisplayedRowCount()返回的是经过过滤、排序后的可见行数，getRowCount()返回的是原始总行数，根据业务需求选择即可
• 当分页从开启切换为关闭时，AG-Grid会自动展示所有行，无需额外处理

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