如何在 MUI Pagination 中添加每页显示数量下拉选择器

本文介绍如何在 material-ui 的 pagination 组件旁集成“每页显示数量”下拉菜单（select），通过 usestate 管理分页大小，并动态更新总页数，实现灵活的数据分页控制。

要在 Material-UI（v5+）中为 添加“每页显示数量”功能，仅靠 Pagination 组件本身是不够的——它仅负责页码导航，不提供条目数控制。你需要配合 和 手动构建一个独立但联动的下拉控件，并同步更新分页逻辑。

✅ 正确实现步骤

1. 导入必要组件
   确保引入 Pagination、Select、MenuItem 以及 React 的 useState：

   import { Pagination, Select, MenuItem } from '@mui/material';
   import React, { useState } from 'react';

2. 声明并管理 itemsPerPage 状态
   使用 useState 初始化每页条目数（如默认 10 条），该值将直接影响总页数计算：

   const [itemsPerPage, setItemsPerPage] = useState(10);

3. 动态计算总页数
   将原写死的 TABLE_LIMIT 替换为响应式的 itemsPerPage，确保页码总数实时更新：

   count={Math.ceil(totalCount / itemsPerPage)}

4. 渲染 Pagination + Select 组合布局
   建议用 或 布局提升可维护性（替代内联 style）。以下是推荐的结构化写法：

   
      page(event, newPage)} // 注意：若 page 是 (event, page) 形参，需保持签名一致
       variant="outlined"
       shape="rounded"
       boundaryCount={1}
     />
      {
         setItemsPerPage(Number(e.target.value));
         // ⚠️ 重要：切换每页数量时，通常需重置当前页为第 1 页，避免越界
         if (Number(pageNumber) > 1) {
           page(null, 1); // 触发跳转到首页
         }
       }}
       sx={{ minWidth: 120 }}
     >
       10 条/页
       20 条/页
       50 条/页
       100 条/页
     
   

⚠️ 关键注意事项

• 页码重置逻辑：当用户将每页条数从 10 改为 50 时，若当前页码为第 5 页，原数据可能已不足 5 页 → 易导致空数据或请求异常。因此，强烈建议在 onChange 中主动跳转回第 1 页。
• 类型安全：Select 的 value 是字符串，务必用 Number() 转换为数字，避免 totalCount / "10" 返回 NaN。
• 服务端协同：前端修改 itemsPerPage 后，务必同步更新 API 请求参数（如 limit=20&offset=0），否则 UI 与数据不一致。
• 无障碍支持：为 添加 label 或 aria-label（如 aria-label="每页显示数量"），提升可访问性。

✅ 最终效果

用户可在右上角同时操作页码跳转与每页容量切换，所有状态联动、响应及时，符合企业级数据表格的交互规范。此方案轻量、可复用，且完全兼容 MUI v5/v6 主题与样式系统。

如此AI员工

国内首个全链路营销获客AI Agent

下载