Pagination 分页

使用分页组件，用户可以从一系列页面中选择某个特定的页面。

基础分页

<Pagination count={10} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />

<Pagination count={10} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />

Press Enter to start editing

描边分页

<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />
<Pagination count={10} variant="outlined" disabled />

<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />
<Pagination count={10} variant="outlined" disabled />

Press Enter to start editing

圆形分页

<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />

<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />

Press Enter to start editing

分页大小

<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />

<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />

Press Enter to start editing

按钮

你可以有选择地启用首尾页的按钮，或这禁用上一页和下一页的按钮。

<Pagination count={10} showFirstButton showLastButton />
<Pagination count={10} hidePrevButton hideNextButton />

<Pagination count={10} showFirstButton showLastButton />
<Pagination count={10} hidePrevButton hideNextButton />

Press Enter to start editing

分页范围

你可以使用 siblingRange 属性来指定当前页面两侧显示的数字多少，并使用boundaryRange属性来调整在起始和结束页码旁边显示的位数。

<Pagination
  count={10}
  renderItem={(item) => (
    <PaginationItem
      slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>

<Pagination
  count={10}
  renderItem={(item) => (
    <PaginationItem
      slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>

Press Enter to start editing

分页范围

你可以使用 siblingRange 属性来指定当前页面两侧显示的数字多少，并使用boundaryRange属性来调整在起始和结束页码旁边显示的位数。

<Pagination count={11} defaultPage={6} siblingCount={0} />
<Pagination count={11} defaultPage={6} /> {/* Default ranges */}
<Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
<Pagination count={11} defaultPage={6} boundaryCount={2} />

<Pagination count={11} defaultPage={6} siblingCount={0} />
<Pagination count={11} defaultPage={6} /> {/* Default ranges */}
<Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
<Pagination count={11} defaultPage={6} boundaryCount={2} />

Press Enter to start editing

可控制的分页

Page: 1

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

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

Press Enter to start editing

与 Router 整合

<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
  <Routes>
    <Route path="*" element={<Content />} />
  </Routes>
</MemoryRouter>

<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
  <Routes>
    <Route path="*" element={<Content />} />
  </Routes>
</MemoryRouter>

Press Enter to start editing

`usePagination`

For advanced customization use cases, a headless usePagination() hook is exposed. 它支持的选项与分页组件大致相同，但不包括与 JSX 渲染有关的所有属性。它支持的选项与分页组件大致相同，但不包括与 JSX 渲染有关的所有属性。 The Pagination component is built on this hook.

import usePagination from '@mui/material/usePagination';

表格分页

Pagination 组件的设计是为了在不使用无限加载的情况下，将任意数量的项目进行分页。比如说博客这样重视 SEO 的环境下，它是首选。

对于大型表格数据的分页，应该使用 TablePagination 组件。

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

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

Press Enter to start editing

You can learn more about this use case in the table section of the documentation.

Accessibility

ARIA

The root node has a role of "navigation" and aria-label "pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the getItemAriaLabel prop.

键盘输入

The pagination items are in tab order, with a tabindex of "0".

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.