【Material-UI】Pagination 组件详解（下）

Material-UI 是 React 开发者常用的 UI 框架，提供了丰富的组件库来构建现代用户界面。分页（Pagination）是一个重要的组件，它在需要处理大量数据时，能有效地帮助用户浏览信息。本文将详细介绍 Material-UI 中的 Pagination 组件，以及其相关属性和高级用法。

一、Pagination 组件概述

1. 组件介绍

Pagination 组件用于在大量数据的情况下实现分页显示。它允许用户在多个数据页面之间导航，提升了数据展示的可管理性。Material-UI 提供了灵活的分页配置，使开发者能够根据实际需求自定义分页功能。

2. 基本用法

通过 Pagination 组件，可以很容易地实现一个简单的分页功能：

import * as React from 'react';
import Pagination from '@mui/material/Pagination';

export default function BasicPagination() {
  return (
    <Pagination count={10} />
  );
}

在这个示例中，count={10} 表示总共10页，用户可以点击不同的页码进行页面切换。默认情况下，分页组件展示第一页，并根据用户的操作自动更新页面。

二、Pagination 组件的核心属性

Pagination 组件提供了一系列属性，允许开发者对分页行为和显示方式进行定制。下面是几个重要的属性：

1. count：总页数

count 属性指定了分页的总页数。在大部分情况下，这个属性与数据的总量有关。例如，如果有 100 条数据，每页显示 10 条，count 属性的值应为 10。

<Pagination count={10} />

2. page：当前页

page 属性用于控制当前选中的页码。可以通过该属性使分页组件成为受控组件，并结合 onChange 事件来动态更新当前页面。

const [page, setPage] = React.useState(1);

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

<Pagination count={10} page={page} onChange={handleChange} />

在这个例子中，page 属性与组件的状态绑定，当用户选择不同的页码时，状态值会更新，页面随之切换。

3. siblingCount：相邻页码显示数量

siblingCount 属性用于控制当前页码两侧展示的相邻页码数量。默认值为 1，即当前页的左右两侧各显示一个相邻的页码。

<Pagination count={10} defaultPage={6} siblingCount={0} />

在上例中，siblingCount={0} 表示不显示当前页的相邻页码，分页控件将只显示当前页、首尾页码及省略号。

4. boundaryCount：边界页码显示数量

boundaryCount 属性控制分页控件开头和结尾显示的页码数量。默认值为 1，即在最开始和最末尾显示一个页码。

<Pagination count={10} defaultPage={6} boundaryCount={2} />

在这个示例中，boundaryCount={2} 会显示两个起始页码和两个末尾页码，从而为用户提供更多直接访问的选项。

5. onChange：页码切换事件

onChange 属性用于在用户切换页码时触发相应的事件处理函数。通过这个回调函数，开发者可以在页面切换时更新数据或触发其他逻辑。

const handleChange = (event, value) => {
  console.log(`当前页码：${value}`);
};

<Pagination count={10} onChange={handleChange} />

这个例子展示了当用户切换页码时，handleChange 函数会输出当前选中的页码。

三、高级用法：受控分页与自定义分页

1. 受控分页

受控分页通过 page 和 onChange 属性实现，开发者可以完全掌控分页组件的行为。以下示例展示了如何实现一个完全受控的分页组件：

const [page, setPage] = React.useState(1);

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

<Pagination count={10} page={page} onChange={handleChange} />

在这个受控组件中，page 状态和 handleChange 函数共同作用，使得页面状态与分页控件保持同步。

2. 自定义分页样式

Material-UI 提供了 sx 属性，允许开发者通过内联样式来自定义分页组件的外观。以下示例展示了如何修改分页按钮的样式：

<Pagination
  count={10}
  sx={{
    "& .MuiPaginationItem-root": {
      color: "blue",
    },
  }}
/>

这个例子通过 sx 属性，将分页按钮的颜色设置为蓝色，从而实现简单的样式自定义。

四、Router 集成：与路由结合的分页

在实际项目中，分页经常与路由结合使用，以确保用户可以通过 URL 来访问不同的页面。Material-UI 的 Pagination 组件可以与 react-router-dom 结合，实现路由跳转功能。

import { MemoryRouter, Routes, Route, useNavigate } from 'react-router-dom';

function PaginationWithRouter() {
  const navigate = useNavigate();

  const handleChange = (event, value) => {
    navigate(`/page/${value}`);
  };

  return <Pagination count={10} onChange={handleChange} />;
}

<MemoryRouter initialEntries={['/page/1']}>
  <Routes>
    <Route path="/page/:id" element={<PaginationWithRouter />} />
  </Routes>
</MemoryRouter>

在这个示例中，PaginationWithRouter 组件通过 useNavigate 钩子实现了分页与路由的结合，用户切换页码时，URL 会动态变化。

五、Table Pagination：表格分页

在处理大型数据表格时，Material-UI 提供了专门的 TablePagination 组件。该组件不仅可以控制页码，还可以设置每页显示的行数：

<TablePagination
  component="div"
  count={100}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>

TablePagination 组件非常适合用于分页展示表格数据，并且可以灵活设置分页参数，如页数、每页数据行数等。

六、可访问性与键盘操作

Pagination 组件默认支持 ARIA 标签，确保页面在无障碍工具（如屏幕阅读器）中的可用性。每个页码按钮都有一个 aria-label 属性，表示其功能，比如“跳转到第一页”、“跳转到下一页”等。

此外，分页按钮默认可以通过键盘操作，用户可以通过 Tab 键导航到分页控件，并使用 Enter 键进行页面切换。

七、总结

Material-UI 的 Pagination 组件为分页功能提供了丰富的自定义选项和集成方案，适用于各种场景。从基础的分页导航到复杂的路由集成，再到表格分页，Pagination 组件可以轻松适应不同需求。通过对 count、page、siblingCount 和 boundaryCount 等属性的灵活配置，开发者可以构建出强大且用户友好的分页系统。

推荐：

• JavaScript
• react
• vue

---