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

本文介绍如何在 material-ui（mui）的 pagi

nation 组件旁集成一个“每页显示条数”下拉菜单（select），通过动态更新 `itemsperpage` 实现分页数据量的灵活控制，并同步修正总页数计算逻辑。

要在 MUI 的 组件中补充“每页显示数量”功能，核心在于：解耦固定分页限制（如原 TABLE_LIMIT），改用受控状态管理每页条数，并联动更新总页数（count）与数据请求逻辑。

以下是完整实现步骤与推荐代码结构：

✅ 步骤一：引入必要组件并声明状态

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(10);
const pageSizeOptions = [5, 10, 20, 50, 100];

✅ 步骤三：渲染 Pagination + Select 组合

注意关键点：

• count 必须基于 Math.ceil(totalCount / itemsPerPage) 动态计算；
• onChange 中需同时处理页码跳转与页大小变更（建议将页码重置为 1，避免越界）；
• 使用 或 包裹实现水平对齐，提升布局可控性。

  
    {/* 分页控件 */}
     {
        // 页码变更时，通常应保持 itemsPerPage 不变
        onPageChange(value); // 示例：setPageNumber(value)
      }}
      variant="outlined"
      shape="rounded"
      boundaryCount={1}
    />
  
    {/* 每页显示数量选择器 */}
     {
        const newPageSize = Number(e.target.value);
        setItemsPerPage(newPageSize);
        // ⚠️ 重要：页大小变更时，建议重置当前页为第 1 页
        onPageChange(1);
        // 若需额外逻辑（如刷新数据），在此调用 onItemsPerPageChange(newPageSize)
      }}
      sx={{ minWidth: '120px' }}
    >
      {pageSizeOptions.map((size) => (
        
          {size} 条/页
        
      ))}
    
  

  ? 注意事项与最佳实践

  • 页码越界防护：当 itemsPerPage 增大后，原 pageNumber 可能超过新总页数（如原 100 条/10 页 → 改为 50 条/2 页，但当前页仍为 5）。因此 onItemsPerPageChange 中强制 onPageChange(1) 是合理且必要的。
  • 服务端分页适配：确保你的数据请求逻辑（如 fetchData(page, limit)）使用了最新的 itemsPerPage，而非硬编码的 TABLE_LIMIT。
  • 无障碍支持： 默认已具备键盘导航与屏幕阅读器支持；若需进一步优化，可添加 aria-label="每页显示数量"。
  • 响应式建议：在小屏幕上可考虑将 Select 移至 Pagination 上方或下方，使用 flexDirection="column" 配合 sx={{ flexDirection: { xs: 'column', sm: 'row' } }}。

  通过以上改造，你不仅实现了 UI 层的“每页显示”功能，更构建了一个可扩展、可维护的分页控制体系——用户可自由切换密度，系统自动保障数据一致性与交互合理性。