MUI 4前端分页配置咨询：TablePagination属性设置疑问

你已经拿到全量数据，前端分页只需通过状态管理当前页码和每页条数，再对原始数据做切片处理即可，以下是具体配置和完整代码：

关键属性配置说明 #

• rowsPerPage：绑定组件状态，默认值设为10（符合你的需求），切换每页条数时更新该状态。
• page：MUI分页组件的页码从0开始计数，初始值设为0（对应第一页），绑定状态后，切换页码时同步更新。
• onChangePage：页码切换回调，在这里更新page状态，同时限制页码范围（不能小于0，且不超过Math.ceil(appointmentList.length / rowsPerPage) - 1）。

另外需要补充onChangeRowsPerPage回调，处理每页条数切换，同时重置页码到第一页，避免出现无数据的空白页。

完整代码示例 #

import React, { useState } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TablePagination from '@material-ui/core/TablePagination';

const AppointmentTable = ({ appointmentList }) => {
  // 初始化分页状态
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  // 对全量数据切片，得到当前页展示数据
  const paginatedData = appointmentList.slice(
    page * rowsPerPage,
    page * rowsPerPage + rowsPerPage
  );

  // 页码切换处理
  const handleChangePage = (_, newPage) => {
    const maxPage = Math.ceil(appointmentList.length / rowsPerPage) - 1;
    setPage(Math.max(0, Math.min(newPage, maxPage)));
  };

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

  return (
    <>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              {/* 替换为你的实际表头 */}
              <TableCell>预约ID</TableCell>
              <TableCell>用户名称</TableCell>
              <TableCell>预约时间</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {paginatedData.map((item) => (
              <TableRow key={item.id}>
                <TableCell>{item.id}</TableCell>
                <TableCell>{item.userName}</TableCell>
                <TableCell>{item.date}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        count={appointmentList.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
        labelRowsPerPage="每页条数:"
        labelDisplayedRows={({ from, to, count }) =>
          `${from}-${to} / ${count !== -1 ? count : `超过${to}`}`
        }
      />
    </>
  );
};

export default AppointmentTable;

注意事项 #

• MUI 4的TablePagination页码从0开始计数，初始page设为0对应第一页，不要直接设为5，否则会跳到第6页（数据足够的情况下）。
• slice方法会自动处理超出数组长度的情况，无需额外判断索引越界。
• 若数据为空，可根据需求添加空状态提示。

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