如何基于Material UI Pagination实现按字母排序的分页？

核心实现思路 #

MUI的Pagination组件支持通过renderItem属性自定义每个页码项的内容，我们可以利用这个特性把默认的数字页码（1-26）映射为对应的字母（A-Z），同时匹配你按字母分组的wordsList结构。

步骤1：实现数字转字母的工具函数 #

先写一个简单的函数，把数字1-26转换成大写字母A-Z：

const numberToLetter = (num) => String.fromCharCode(64 + num);
// 64是ASCII码中'A'的前一位，num=1时返回'A'，num=26时返回'Z'

步骤2：自定义分页项渲染 #

在Pagination组件中使用renderItem属性，替换默认的数字为字母：

<Pagination
  count={26} // 总页数对应A-Z共26个字母
  page={currentPage} // 当前选中的页码（数字1-26）
  onChange={(event, value) => setCurrentPage(value)} // 切换页码时更新状态
  renderItem={(item) => (
    <PaginationItem
      {...item}
      label={numberToLetter(item.page)} // 把数字页码替换为字母
    />
  )}
/>

步骤3：关联字母分组的单词列表 #

切换页码时，根据当前数字页码转成的字母，从wordsList中取出对应分组的单词：

// 假设currentPage是当前选中的数字页码（比如3对应字母C）
const currentLetter = numberToLetter(currentPage);
const currentWords = wordsList[currentLetter] || [];

完整组件示例 #

import { useState } from 'react';
import { Pagination, PaginationItem } from '@mui/material';

const WordListPagination = ({ wordsList }) => {
  const [currentPage, setCurrentPage] = useState(1);

  const numberToLetter = (num) => String.fromCharCode(64 + num);
  const currentLetter = numberToLetter(currentPage);
  const currentWords = wordsList[currentLetter] || [];

  return (
    <div>
      {/* 渲染当前字母分组的单词 */}
      <ul>
        {currentWords.map((word, index) => (
          <li key={index}>{word}</li>
        ))}
      </ul>
      {/* 字母分页组件 */}
      <Pagination
        count={26}
        page={currentPage}
        onChange={(event, value) => setCurrentPage(value)}
        renderItem={(item) => (
          <PaginationItem
            {...item}
            label={numberToLetter(item.page)}
          />
        )}
        variant="outlined"
        shape="rounded"
      />
    </div>
  );
};

export default WordListPagination;

关键细节说明 #

• renderItem会接收每个页码项的配置（包含page数字、选中状态等），我们只需要替换label为对应的字母即可。
• 如果你的wordsList中某些字母分组为空，组件会自动渲染空列表，不影响分页逻辑。
• 可以通过Pagination和PaginationItem的其他属性（比如variant、color）自定义分页组件的样式。

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