分页器

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

导入 #


import Paginator from 'primevue/paginator';

基本 #

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


<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>

模板 #

可以使用template属性和预定义的键自定义分页器元素，默认值为“FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown”。以下是可以按任意顺序放置在分页器中的可用元素。

第一页链接
上一页链接
页码链接
下一页链接
最后一页链接
每页显示行数下拉菜单
跳转到页面下拉菜单
跳转到页面输入框
当前页面报告


<Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />

<div class="p-4 text-center">
    <img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="rounded w-full sm:w-[30rem]" />
</div>

当前页面报告 #

模板中的当前页面报告项显示有关分页状态的信息。默认值为（{currentPage} of {totalPages}），而可用占位符如下：

{currentPage}
{totalPages}
{rows}
{first}
{last}
{totalRecords}


<Paginator :rows="10" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />

响应式 #

可以通过为每个断点定义一个模板来自定义每个屏幕尺寸的分页器元素。请注意，断点基于 max-width 设置，如果省略默认键，则将使用默认模板。下面的示例有 4 个设置：最大 640px、641px-960px 之间、961px-1300px 之间和大于 1301px（为默认值）。


<Paginator
    :template="{
        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput'
    }"
    :rows="10"
    :totalRecords="120">
</Paginator>

自定义内容 #

有两个名为start和end的可用模板，用于向这些位置添加自定义内容。这两个模板都获取一个状态对象作为插槽属性，以提供当前页面、第一个索引和行。


<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]">
    <template #start="slotProps">
        Page: {{ slotProps.state.page }}
        First: {{ slotProps.state.first }}
        Rows: {{ slotProps.state.rows }}
    </template>
    <template #end>
        <Button type="button" icon="pi pi-search" />
    </template>
</Paginator>

无头 #

通过定义一个container插槽来启用无头模式，该插槽允许您实现整个 UI 而不是默认元素。该模板接收以下数据；

first
last
rows
page
pageCount
totalRecords
firstPageCallback
lastPageCallback
prevPageCallback
nextPageCallback
rowChangeCallback


<Paginator :rows="10" :totalRecords="120">
    <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
        <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
            <div class="flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between">
                <Button icon="pi pi-chevron-left" rounded text @click="prevPageCallback" :disabled="page === 0" />
                <div class="text-color font-medium">
                    <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
                    <span class="block sm:hidden">Page {{ page + 1 }} of {{ pageCount }}</span>
                </div>
                <Button icon="pi pi-chevron-right" rounded text @click="nextPageCallback" :disabled="page === pageCount - 1" />
            </div>
        </template>
    </template>
</Paginator>

无障碍 #

屏幕阅读器

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

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

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

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

每页显示行数下拉菜单在内部使用下拉组件，有关辅助功能详细信息，请参阅 select 文档。此外，下拉菜单使用 locale API 的 aria.rowsPerPageLabel 属性中的 aria-label。

跳转到页面输入框是一个 input 元素，其 aria-label 引用 aria.jumpToPageInputLabel 属性，而跳转到页面下拉菜单在内部使用下拉组件，其 aria-label 引用 locale API 的 aria.jumpToPageDropdownLabel 属性。

键盘支持

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

每页显示行数下拉菜单键盘支持

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

分页器