本文介绍如何在 material-ui（mui）的 pagination 组件旁集成一个“每页显示条数”下拉菜单（select），通过动态更新 `itemsperpage` 实现分页数据量的灵活控制，并同步修正总页数计算逻辑。
要在 MUI 的
以下是完整实现步骤与推荐代码结构：
✅ 步骤一：引入必要组件并声明状态
import React, { useState, useCallback } from 'react';
import { Pagination, Select, MenuItem, Box } from '@mui/material';
// 假设你已有这些 props 或 state
// totalCount: 总数据条数（来自 API）
// pageNumber: 当前页码（1-based）
// onPageChange: 处理页码切换（如更新 URL 或触发 fetch）
// onItemsPerPageChange: 可选 —— 用于响应每页数量变更（例如重置页码为 1 并重新拉取数据）✅ 步骤二：定义每页条数状态与选项
const [itemsPerPage, setItemsPerPage] = useState<number>(10); const pageSizeOptions = [5, 10, 20, 50, 100];
✅ 步骤三：渲染 Pagination + Select 组合
注意关键点：
- count 必须基于 Math.ceil(totalCount / itemsPerPage) 动态计算；
- onChange 中需同时处理页码跳转与页大小变更（建议将页码重置为 1，避免越界）；
- 使用
或 包裹实现水平对齐，提升布局可控性。<Box display="flex" alignItems="center" gap={2} mt={2.5}> {/* 分页控件 */} <Pagination count={totalCount ? Math.ceil(totalCount / itemsPerPage) : 0} page={Number(pageNumber)} onChange={(event, value) => { // 页码变更时，通常应保持 itemsPerPage 不变 onPageChange(value); // 示例：setPageNumber(value) }} variant="outlined" shape="rounded" boundaryCount={1} /> {/* 每页显示数量选择器 */} <Select size="small" value={itemsPerPage} onChange={(e) => { const newPageSize = Number(e.target.value); setItemsPerPage(newPageSize); // ⚠️ 重要：页大小变更时，建议重置当前页为第 1 页 onPageChange(1); // 若需额外逻辑（如刷新数据），在此调用 onItemsPerPageChange(newPageSize) }} sx={{ minWidth: '120px' }} > {pageSizeOptions.map((size) => ( <MenuItem key={size} value={size}> {size} 条/页 </MenuItem> ))} </Select> </Box>? 注意事项与最佳实践
- 页码越界防护：当 itemsPerPage 增大后，原 pageNumber 可能超过新总页数（如原 100 条/10 页 → 改为 50 条/2 页，但当前页仍为 5）。因此 onItemsPerPageChange 中强制 onPageChange(1) 是合理且必要的。
- 服务端分页适配：确保你的数据请求逻辑（如 fetchData(page, limit)）使用了最新的 itemsPerPage，而非硬编码的 TABLE_LIMIT。
- 无障碍支持：
- 响应式建议：在小屏幕上可考虑将 Select 移至 Pagination 上方或下方，使用 flexDirection="column" 配合 sx={{ flexDirection: { xs: 'column', sm: 'row' } }}。
通过以上改造，你不仅实现了 UI 层的“每页显示”功能，更构建了一个可扩展、可维护的分页控制体系——用户可自由切换密度，系统自动保障数据一致性与交互合理性。
