如何为MUI分页组件的页码数字添加千位逗号分隔符？

你当前实现的MUI分页效果参考：

实现大页码展示为39,233这类千位分隔格式，不需要修改组件核心逻辑，直接利用MUI Pagination组件自带的自定义渲染能力即可完成，具体步骤如下：

• 利用组件提供的renderItem属性，自定义每个分页按钮的渲染内容
• 仅对类型为普通页码的按钮做数字格式化，上一页、下一页、省略号等特殊按钮保持默认渲染逻辑
• 格式化逻辑优先用JS原生API实现，不需要额外引入第三方依赖

具体代码实现（以MUI v5/v6 React版本为例） #

import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';

export default function CustomPagination() {
  // 数字千位格式化方法
  const formatNumberWithComma = (num) => {
    // 固定返回英文逗号分隔格式，不受用户系统语言影响
    return num.toLocaleString('en-US');
    
    // 如果需要跟随用户本地语言的数字格式，直接不传参数即可：
    // return num.toLocaleString();

    // 如果需要兼容极老版本浏览器，也可以用正则实现：
    // return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };

  return (
    <Pagination
      count={100000} // 替换为你实际的总页数
      boundaryCount={1}
      siblingCount={1}
      renderItem={(item) => {
        // 仅处理普通页码按钮
        if (item.type === 'page') {
          return (
            <PaginationItem {...item}>
              {formatNumberWithComma(item.page)}
            </PaginationItem>
          );
        }
        // 上一页、下一页、省略号等按钮直接返回默认渲染
        return <PaginationItem {...item} />;
      }}
    />
  );
}

注意：不要修改传入PaginationItem的page原始属性值，只替换按钮内部展示的文本即可，否则会导致分页组件的页码计算、跳转逻辑出现异常。

如果是使用MUI v4版本，仅需要修改组件导入路径为@material-ui/lab/Pagination和@material-ui/lab/PaginationItem，自定义渲染的逻辑完全通用。

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