Paginator

分頁器以分頁格式顯示資料，並提供頁面之間的導覽。

匯入 #


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」。以下是可以依任何順序放置在分頁器內的可用元素。

FirstPageLink
PrevPageLink
PageLinks
NextPageLink
LastPageLink
RowsPerPageDropdown
JumpToPageDropdown
JumpToPageInput
CurrentPageReport


<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} / {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 的範本可用於將自訂內容新增至這些位置。這兩個範本都會取得一個狀態物件作為 slot 屬性，以提供目前頁面、第一筆索引和列數。


<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 slot 來啟用，讓您實作整個 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 屬性。

頁面連結也是按鈕元素，具有衍生自 locale API 的 aria.pageLabel 的 aria-label 屬性。目前頁面也會以 aria-current 設定為「page」來標記。

目前頁面報告使用 aria-live="polite" 來指示螢幕閱讀器有關分頁狀態的變更。

每頁列數下拉式選單在內部使用下拉式選單元件，有關無障礙功能的詳細資訊，請參閱 select 文件。此外，下拉式選單使用來自 locale API 的 aria.rowsPerPageLabel 屬性的 aria-label。

跳至頁面輸入是一個 input 元素，具有參照 aria.jumpToPageInputLabel 屬性的 aria-label，而跳至頁面下拉式選單在內部使用下拉式選單元件，其 aria-label 參照 locale API 的 aria.jumpToPageDropdownLabel 屬性。

鍵盤支援

按鍵	功能
tab	在分頁器元素之間移動焦點。
enter	執行分頁器元素動作。
space	執行分頁器元素動作。

每頁列數下拉式選單鍵盤支援

有關鍵盤支援的詳細資訊，請參閱 select 文件。