分页器

分页器以分页格式显示数据，并提供页面之间的导航。

导入#


import { Paginator } from 'primereact/paginator';

基本#

分页器用作受控组件，具有 first、rows 和 onPageChange 属性来管理每页要显示的第一个索引和记录数。需要使用 totalRecords 属性指定记录总数。默认模板包含一个用于更改 rows 的下拉列表，因此下拉选项也需要 rowsPerPageOptions。


<Paginator first={first} rows={rows} totalRecords={120} rowsPerPageOptions={[10, 20, 30]} onPageChange={onPageChange} />

布局#

分页器默认 UI 元素的顺序和内容由 template 属性的 layout 选项定义。元素的默认标记名称如下：

FirstPageLink
PrevPageLink
NextPageLink
LastPageLink
PageLinks
RowsPerPageDropdown
CurrentPageReport
JumpToPageInput

（1/5）


<Paginator first={first} rows={10} totalRecords={50} onPageChange={onPageChange} 
    template={{ layout: 'PrevPageLink CurrentPageReport NextPageLink' }} />

模板#

模板允许通过使用元素名称定义回调来覆盖 UI 元素的默认内容。传递给这些回调的参数包含用于绑定到自定义元素的属性，例如触发分页的事件处理程序。此外，还有 leftContent 和 rightContent 属性可用于在分页器的两侧插入内容。

...跳转到

每页项目数 1 - 10的120

每页项目数

1 - 10的120


<Paginator template={template1} first={first[0]} rows={rows[0]} totalRecords={120} onPageChange={(e) => onPageChange(e, 0)} leftContent={leftContent} rightContent={rightContent} />
<Paginator template={template2} first={first[1]} rows={rows[1]} totalRecords={120} onPageChange={(e) => onPageChange(e, 1)} className="justify-content-end" />
<Paginator template={template3} first={first[2]} rows={rows[2]} totalRecords={120} onPageChange={(e) => onPageChange(e, 2)} className="justify-content-start" />

图像#

使用分页器的示例图像库实现。

（1/12）


<Paginator first={first} rows={1} totalRecords={12} onPageChange={onPageChange} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />

<div className="p-3 text-center">
    <img alt={first} src={`https://primefaces.org/cdn/primereact/images/nature/nature${first + 1}.jpg`} className="shadow-2 border-round max-w-full" />
</div>

无障碍访问#

屏幕阅读器

分页器放置在 nav 元素内以指示导航部分。可以使用模板自定义所有分页器元素，但默认行为如下所示。

第一个、上一个、下一个和最后一个页面导航元素，带有 aria-label 属性，分别引用 locale API 的 aria.firstPageLabel、aria.prevPageLabel、aria.nextPageLabel 和 aria.lastPageLabel 属性。

页面链接也是按钮元素，其 aria-label 属性派生自 locale API 的 aria.pageLabel。当前页面也用设置为“page”的 aria-current 标记。

当前页面报告使用 aria-live="polite" 来指示屏幕阅读器关于分页状态的变化。

每页行数下拉列表内部使用下拉组件，有关无障碍访问详细信息，请参阅下拉列表文档。此外，下拉列表使用来自 locale API 的 aria.rowsPerPage 属性的 aria-label。

跳转到页面输入是 input 元素，其 aria-label 引用 locale API 的 aria.jumpToPage 属性。

键盘支持

按键	功能
tab	在分页器元素之间移动焦点。
enter	执行分页器元素操作。
space	执行分页器元素操作。

每页行数下拉列表键盘支持

有关键盘支持的更多详细信息，请参阅下拉列表文档。