如何在AG Grid的paginationPageSizeSelector中添加“全部”或自定义选项？

需求1：添加“All”选项并关联总行数 #

AG Grid 的 paginationPageSizeSelector 支持配置对象数组（而非仅数字数组），通过设置特殊标识值配合分页事件监听，实现“All”选项对应总行数的功能：

gridOptions = {
  pagination: true,
  paginationPageSize: 10,
  // 配置包含文本和值的选项数组，用0作为“All”的特殊标识
  paginationPageSizeSelector: [
    { value: 10, text: '10' },
    { value: 20, text: '20' },
    { value: 50, text: '50' },
    { value: 0, text: 'All' }
  ],
  // 监听分页变化事件，处理“All”选项的逻辑
  onPaginationChanged: function(params) {
    const currentSize = params.api.paginationGetCurrentPageSize();
    if (currentSize === 0) {
      // 获取表格总行数
      const totalRows = params.api.getModel().getRowCount();
      // 设置分页大小为总行数
      params.api.paginationSetPageSize(totalRows);
    }
  }
};

需求2：自定义分页选择器显示文本 #

同样利用对象数组格式，直接指定每个选项的 text 字段为自定义内容即可，结合上述“All”的处理逻辑：

gridOptions = {
  pagination: true,
  paginationPageSize: 10,
  paginationPageSizeSelector: [
    { value: 10, text: '10' },
    { value: 20, text: '20' },
    { value: 1000, text: '1000 (slow)' },
    { value: 0, text: 'All' }
  ],
  onPaginationChanged: function(params) {
    const currentSize = params.api.paginationGetCurrentPageSize();
    if (currentSize === 0) {
      const totalRows = params.api.getModel().getRowCount();
      params.api.paginationSetPageSize(totalRows);
    }
  }
};

关键说明 #

• paginationPageSizeSelector 支持两种配置格式：纯数字数组（仅显示数字）、{value: 数字, text: 显示文本} 对象数组（自定义显示内容）。
• 用 0 作为“All”的标识值是约定俗成的方式，也可以用其他特殊数字（如-1），只要在事件监听中对应判断即可。

内容的提问来源于stack exchange，提问作者V Jayakar Edidiah