如何区分AgGrid onPaginationChanged的加载触发与分页按钮点击触发？

针对你使用ag-grid-community v25.0.0遇到的onPaginationChanged加载时触发、无可用params的问题，推荐以下两种解决方案：

方案一：初始化状态标记法（优先推荐） #

通过一个状态变量标记首次加载触发的回调，后续触发则判定为用户操作（包括分页按钮点击、API调用分页等）。

// 以React为例，其他框架逻辑类似
import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

const YourGridComponent = () => {
  // 标记是否为首次加载触发的回调
  const [isInitialLoad, setIsInitialLoad] = useState(true);

  const onPaginationChanged = () => {
    if (isInitialLoad) {
      // 首次加载触发，跳过特定逻辑并更新状态
      setIsInitialLoad(false);
      return;
    }
    // 此处为分页按钮点击或其他用户/API触发的分页变更，执行你的特定逻辑
    console.log('分页按钮点击触发');
    // 你的业务逻辑代码...
  };

  return (
    <div className="ag-theme-alpine">
      <AgGridReact
        onPaginationChanged={onPaginationChanged}
        pagination={true}
        // 其他Grid配置项...
      />
    </div>
  );
};

export default YourGridComponent;

这种方法不依赖AgGrid内部参数或DOM结构，适配v25版本params为undefined的情况，逻辑简单且稳定。

方案二：监听分页按钮DOM点击事件（备选） #

直接监听AgGrid分页按钮的点击事件，仅在用户手动点击时执行特定逻辑。该方法依赖AgGrid内部DOM类名，v25版本分页按钮的类名为ag-pagination-button。

import { useEffect, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

const YourGridComponent = () => {
  const gridRef = useRef(null);

  const handlePaginationClick = () => {
    // 分页按钮点击时执行的特定逻辑
    console.log('分页按钮点击触发');
    // 你的业务逻辑代码...
  };

  useEffect(() => {
    // 等待Grid渲染完成后获取分页按钮元素
    const paginationButtons = gridRef.current?.api?.gridPanel?.paginationPanel?.element.querySelectorAll('.ag-pagination-button');
    if (paginationButtons) {
      paginationButtons.forEach(btn => btn.addEventListener('click', handlePaginationClick));
    }

    // 组件卸载时移除事件监听，避免内存泄漏
    return () => {
      if (paginationButtons) {
        paginationButtons.forEach(btn => btn.removeEventListener('click', handlePaginationClick));
      }
    };
  }, []);

  // 保留原回调处理其他分页变更场景（如API调用setPage）
  const onPaginationChanged = () => {
    // 非按钮点击的分页变更逻辑...
  };

  return (
    <div className="ag-theme-alpine">
      <AgGridReact
        ref={gridRef}
        onPaginationChanged={onPaginationChanged}
        pagination={true}
        // 其他Grid配置项...
      />
    </div>
  );
};

export default YourGridComponent;

注意事项 #

• 若你的分页变更还会通过API调用（如gridApi.setPage()）触发，方案一会将这类场景判定为非加载触发；若需要严格区分手动点击按钮和API触发分页，则方案二更合适。
• 方案二依赖AgGrid内部DOM结构，若后续版本更新类名可能失效，仅推荐在v25版本使用。

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