Paginator

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

インポート#


import { Paginator } from 'primereact/paginator';
         

基本#

Paginatorは、表示する最初のインデックスとページあたりのレコード数を管理するために、first、rows、およびonPageChangeプロパティを持つ制御されたコンポーネントとして使用されます。レコードの総数は totalRecordsプロパティで指定する必要があります。デフォルトのテンプレートには、rowsを変更するためのドロップダウンが含まれているため、ドロップダウンオプションにはrowsPerPageOptionsも必要です。

10

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

レイアウト#

Paginatorのデフォルトの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プロパティを使用して、Paginatorの両側にコンテンツを挿入できます。

...
10
移動
ページあたりのアイテム数
10
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" />
         

画像#

Paginatorを使用したサンプル画像ギャラリーの実装。

(1 / 12)
0

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

アクセシビリティ#

スクリーンリーダー

Paginatorは、ナビゲーションセクションを示すためにnav要素内に配置されます。Paginatorのすべての要素はテンプレートを使用してカスタマイズできますが、デフォルトの動作は以下にリストされています。

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

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

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

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

ジャンプ先ページ入力は、locale APIのaria.jumpToPageプロパティを参照するaria-labelを持つinput要素です。

キーボードサポート

キー機能
tabPaginator要素を通してフォーカスを移動します。
enterPaginator要素のアクションを実行します。
spacePaginator要素のアクションを実行します。

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

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

              PrimeReact 10.8.3 by PrimeTek