Pagination 组件在 Material UI 中用于创建分页效果，使用户能够轻松浏览大量内容。在数据列表或表格中，Pagination 组件可以帮助分隔和组织信息，提升用户体验。本文将详细介绍 Pagination 组件的使用，包括其属性、方法、示例代码以及与其他组件的结合使用。

1. 什么是 Pagination？

Pagination 组件用于表示当前页数及其可用的其他页数。它通常与表格、列表或任何需要分步显示数据的组件一起使用。

2. 安装 Material UI

确保你的项目中已经安装了 Material UI。如果尚未安装，请使用以下命令：

npm install @mui/material @emotion/react @emotion/styled

3. 基本用法

示例：基础的 Pagination

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

function BasicPagination() {
  const [page, setPage] = useState(1);

  const handleChange = (event, value) => {
    setPage(value);
  };

  return (
    <Stack spacing={2}>
      <Pagination 
        count={10} 
        page={page} 
        onChange={handleChange} 
        variant="outlined" 
        color="primary" 
      />
    </Stack>
  );
}

export default BasicPagination;

示例解析：

• count: 总页数。
• page: 当前页数。
• onChange: 处理页码变化的回调函数。
• variant: 可以选择 "text" 或 "outlined"。
• color: 指定颜色，可以是 "standard"、"primary" 或 "secondary"。

4. Pagination 的属性

常用属性

• count: 总页数，必填属性。
• page: 当前页数，必填属性。
• onChange: 当页码变化时调用的回调函数，接收两个参数：事件和新页码。
• variant: 控制样式，"text" 或 "outlined"。
• color: 控制颜色风格，"standard"、"primary" 或 "secondary"。
• shape: 形状样式，"rounded" 或 "circular"。
• size: 设置大小，"small"、"medium" 或 "large"。
• showFirstButton: 显示跳转到第一项的按钮。
• showLastButton: 显示跳转到最后一项的按钮。

5. 分页与数据结合使用

示例：与表格结合

import React, { useState } from 'react';
import Pagination from '@mui/material/Pagination';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

const rows = Array.from({ length: 100 }, (_, index) => ({ id: index + 1, name: `Item ${index + 1}` }));

function PaginatedTable() {
  const [page, setPage] = useState(1);
  const rowsPerPage = 10;

  const handleChange = (event, value) => {
    setPage(value);
  };

  const startIndex = (page - 1) * rowsPerPage;
  const currentRows = rows.slice(startIndex, startIndex + rowsPerPage);

  return (
    <Paper>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>Name</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {currentRows.map((row) => (
              <TableRow key={row.id}>
                <TableCell>{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <Pagination 
        count={Math.ceil(rows.length / rowsPerPage)} 
        page={page} 
        onChange={handleChange} 
        variant="outlined" 
        color="primary" 
      />
    </Paper>
  );
}

export default PaginatedTable;

示例解析：

• 创建一个表格并填充100条数据。
• 使用 slice 方法根据当前页码和每页条数计算当前显示的数据。

6. 自定义样式

示例：自定义 Pagination 样式

import React, { useState } from 'react';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/material/styles';

const CustomPagination = styled(Pagination)(({ theme }) => ({
  '& .MuiPaginationItem-root': {
    color: theme.palette.secondary.main,
  },
}));

function CustomStyledPagination() {
  const [page, setPage] = useState(1);

  const handleChange = (event, value) => {
    setPage(value);
  };

  return (
    <Stack spacing={2}>
      <CustomPagination 
        count={10} 
        page={page} 
        onChange={handleChange} 
        variant="outlined" 
      />
    </Stack>
  );
}

export default CustomStyledPagination;

示例解析：

• 使用 styled API 自定义 Pagination 的样式。

7. 显示跳转按钮

示例：显示“第一页”和“最后一页”按钮

function ExtendedPagination() {
  const [page, setPage] = useState(1);
  
  const handleChange = (event, value) => {
    setPage(value);
  };

  return (
    <Pagination
      count={10}
      page={page}
      onChange={handleChange}
      showFirstButton
      showLastButton
    />
  );
}

示例解析：

• 设置 showFirstButton 和 showLastButton 属性显示跳转按钮。

8. 结合筛选功能

示例：与筛选器结合使用

import React, { useState } from 'react';
import { TextField } from '@mui/material';
import Pagination from '@mui/material/Pagination';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

const rows = Array.from({ length: 100 }, (_, index) => ({ id: index + 1, name: `Item ${index + 1}` }));

function FilteredPaginatedTable() {
  const [page, setPage] = useState(1);
  const [searchTerm, setSearchTerm] = useState('');
  const rowsPerPage = 10;

  const handleChange = (event, value) => {
    setPage(value);
  };

  const filteredRows = rows.filter(row => row.name.toLowerCase().includes(searchTerm.toLowerCase()));
  const startIndex = (page - 1) * rowsPerPage;
  const currentRows = filteredRows.slice(startIndex, startIndex + rowsPerPage);

  return (
    <Paper>
      <TextField 
        label="搜索" 
        variant="outlined" 
        onChange={(e) => setSearchTerm(e.target.value)} 
      />
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>Name</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {currentRows.map((row) => (
              <TableRow key={row.id}>
                <TableCell>{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <Pagination 
        count={Math.ceil(filteredRows.length / rowsPerPage)} 
        page={page} 
        onChange={handleChange} 
        variant="outlined" 
      />
    </Paper>
  );
}

export default FilteredPaginatedTable;

示例解析：

• 增加一个搜索框，允许用户筛选数据。
• 结合 Pagination，显示筛选后的结果。

9. 结论

在本文中，我们详细探讨了 Material UI 中的 Pagination 组件，包括其基本用法、属性、与表格、筛选器的结合使用以及自定义样式。Pagination 组件是一个不可或缺的工具，能够帮助你有效地管理和呈现大量数据。

希望这些示例能帮助你更好地理解和使用 Pagination 组件，提升你的应用用户体验。如果你对 Material UI 的其他组件感兴趣，欢迎继续关注我们的系列文章。