如何为MUI TablePagination添加页码选择功能

要保留原有分页功能的同时实现「直接选择指定页码跳转」，核心是通过ActionsComponent属性自定义分页操作区域，替换默认的翻页控件。以下是完整实现方案：

实现步骤 #

• 自定义分页操作组件，集成翻页按钮、页码输入框和总页数显示
• 处理页码输入的校验与跳转逻辑
• 将自定义组件传入TablePagination的ActionsComponent属性

完整代码示例 #

import { useState } from 'react';
import { TablePagination, IconButton, TextField } from '@mui/material';
import FirstPageIcon from '@mui/icons-material/FirstPage';
import LastPageIcon from '@mui/icons-material/LastPage';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';

// 自定义分页操作组件
const CustomTablePaginationActions = (props) => {
  const { count, page, rowsPerPage, onPageChange } = props;
  const totalPages = Math.ceil(count / rowsPerPage) || 1;

  // 跳转首页
  const handleFirstPage = (event) => {
    onPageChange(event, 0);
  };

  // 跳转上一页
  const handlePrevPage = (event) => {
    onPageChange(event, page - 1);
  };

  // 跳转下一页
  const handleNextPage = (event) => {
    onPageChange(event, page + 1);
  };

  // 跳转末页
  const handleLastPage = (event) => {
    onPageChange(event, Math.max(0, totalPages - 1));
  };

  // 处理页码输入跳转
  const handlePageJump = (event) => {
    const inputPage = parseInt(event.target.value, 10);
    if (!isNaN(inputPage) && inputPage >= 1 && inputPage <= totalPages) {
      // 转换为MUI的0-based页码格式
      onPageChange(event, inputPage - 1);
    }
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <IconButton onClick={handleFirstPage} disabled={page === 0} aria-label="first page">
        <FirstPageIcon />
      </IconButton>
      <IconButton onClick={handlePrevPage} disabled={page === 0} aria-label="previous page">
        <ChevronLeftIcon />
      </IconButton>
      <IconButton onClick={handleNextPage} disabled={page >= totalPages - 1} aria-label="next page">
        <ChevronRightIcon />
      </IconButton>
      <IconButton onClick={handleLastPage} disabled={page >= totalPages - 1} aria-label="last page">
        <LastPageIcon />
      </IconButton>
      <span>
        第 
        <TextField
          size="small"
          type="number"
          value={page + 1}
          onChange={handlePageJump}
          inputProps={{
            min: 1,
            max: totalPages,
            style: { width: 60, textAlign: 'center' }
          }}
        /> 
        页，共 {totalPages} 页
      </span>
    </div>
  );
};

// 你的表格主组件
export default function YourTableComponent() {
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const showUser = []; // 替换为你的实际数据源

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0); // 切换每页条数时重置到第一页
  };

  return (
    <TablePagination
      rowsPerPageOptions={[5, 10, 20]}
      component="div"
      count={showUser.length}
      rowsPerPage={rowsPerPage}
      page={page}
      onPageChange={handleChangePage}
      onRowsPerPageChange={handleChangeRowsPerPage}
      // 传入自定义分页操作组件
      ActionsComponent={CustomTablePaginationActions}
    />
  );
}

关键说明 #

1. 自定义组件逻辑：

   • 接收TablePagination传递的核心参数，自动计算总页数
   • 保留原有翻页按钮功能，同时新增页码输入框
   • 对输入页码做范围校验，避免非法值，自动转换为MUI要求的0-based页码格式

2. 原有功能保留：

   • 每页条数选择下拉框正常工作
   • 总页数会随每页条数动态更新
   • 切换每页条数时自动重置到第一页，符合常规分页交互逻辑

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