如何更改ag-grid中分页组件的显示位置

方法一：通过CSS样式快速修改 #

AG-Grid默认分页面板使用ag-paging-panel类，默认左对齐，只需修改其flex布局的对齐方式即可：

.ag-paging-panel {
  justify-content: flex-end;
  padding-right: 12px; /* 可选：添加右侧内边距避免控件贴边 */
}

如果项目中使用了AG-Grid的主题样式（如ag-theme-alpine），可以增加选择器权重确保样式生效：

.ag-theme-alpine .ag-paging-panel {
  justify-content: flex-end;
}

方法二：自定义分页组件（进阶灵活方案） #

如果需要更个性化的分页布局，可通过AG-Grid的paginationPanel配置项自定义组件（以React为例）：

1. 编写自定义分页组件：

const CustomPagination = (props) => {
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%', padding: '8px' }}>
      <button onClick={() => props.api.paginationGoToPreviousPage()} disabled={!props.api.paginationHasPreviousPage()}>上一页</button>
      <span style={{ margin: '0 10px' }}>
        {props.api.paginationGetCurrentPage() + 1} / {props.api.paginationGetTotalPages()}
      </span>
      <button onClick={() => props.api.paginationGoToNextPage()} disabled={!props.api.paginationHasNextPage()}>下一页</button>
    </div>
  );
};

2. 在AG-Grid配置中指定该组件：

<AgGridReact
  // 其他核心配置
  pagination={true}
  paginationPanel={<CustomPagination />}
/>

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