Paginator

ページネーターは、ページ形式でデータを表示し、ページ間のナビゲーションを提供します。

インポート # 


import Paginator from 'primevue/paginator';

基本 #

ページネーターは、最初のインデックスと1ページに表示するレコード数を管理するために、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
0

<Paginator v-model:first="first" :rows="1" :totalRecords="1" 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}" />

レスポンシブ #

ページネーター要素は、ブレークポイントごとにテンプレートを定義することで、画面サイズごとにカスタマイズできます。ブレークポイントは最大幅の設定に基づいていることに注意してください。デフォルトキーが省略されている場合、デフォルトテンプレートが使用されます。以下の例では、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という2つのテンプレートがあり、これらの場所にカスタムコンテンツを追加できます。両方のテンプレートは、現在のページ、最初のインデックス、行を提供するスロットプロパティとして状態オブジェクトを受け取ります。


<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>

アクセシビリティ #

スクリーンリーダー

ページネーターは、ナビゲーションセクションを示すnav要素内に配置されます。すべてのページネーター要素はテンプレートを使用してカスタマイズできますが、デフォルトの動作は下記のとおりです。

最初の、前の、次の、最後のページのナビゲーター要素には、それぞれロケール APIのaria.firstPageLabel、aria.prevPageLabel、aria.nextPageLabel、aria.lastPageLabelプロパティを参照するaria-label属性があります。

ページリンクも、ロケール APIのaria.pageLabelから派生したaria-label属性を持つボタン要素です。現在のページは、aria-currentが "page" に設定されていることでもマークされます。

現在のページレポートは、aria-live="polite"を使用して、スクリーンリーダーにページネーションの状態の変化を指示します。

1ページあたりの行数のドロップダウンは、内部的にドロップダウンコンポーネントを使用します。selectのドキュメントを参照してアクセシビリティの詳細を確認してください。さらに、ドロップダウンはロケール APIのaria.rowsPerPageLabelプロパティからのaria-labelを使用します。

ページへのジャンプ入力は、aria.jumpToPageInputLabelプロパティを参照するaria-labelを持つinput要素であり、ページへのジャンプドロップダウンは、ロケール APIのaria.jumpToPageDropdownLabelプロパティを参照するaria-labelを持つドロップダウンコンポーネントを内部的に使用します。

キーボードサポート

キー機能
tabフォーカスをページネーター要素間で移動します。
enterページネーター要素のアクションを実行します。
spaceページネーター要素のアクションを実行します。

1ページあたりの行数のドロップダウンキーボードサポート

キーボードサポートの詳細については、selectのドキュメントを参照してください。

PrimeTekによるVue 3上のPrimeVue 4.0.7 PrimeTek