PrimeFacesのDataTableを探る　～ページング～

今日はPrimeFacesのDataTableにおけるページングです。

コードは以下の過去エントリと同様なので、今日はdataTableタグの属性の部分だけ書きます。

ページングを有効にするにはpaginator属性をtrueにするだけです。
表示する行数はrows属性で指定できるので、例えば以下のように設定すると

ページングの有効化と表示行数の設定

<p:dataTable id="dt" var="book" value="#{bookBean.bookList}" sortMode="multiple"
                         paginator="true" rows="5">

このように表示されます。
f:id:kikutaro777:20130401214107j:plain

2ページ目をクリックすると
f:id:kikutaro777:20130401214138j:plain

3ページ目
f:id:kikutaro777:20130401214213j:plain

矢印ボタンは自動的に有効無効を切り替えてくれてます(^^)

表示行数の動的な変更

rowsPerPageTemplate属性を利用することで、画面にて表示行数を動的に変更できるようになります。
例えば、5行ごと、10行ごと、15行ごと、と以下のように設定すると

<p:dataTable id="dt" var="book" value="#{bookBean.bookList}" sortMode="multiple"
                         paginator="true" rows="5" rowsPerPageTemplate="5,10,15">

このようになります。
f:id:kikutaro777:20130401214302j:plain

ドロップダウンリストを選択して10を選ぶと
f:id:kikutaro777:20130401214318j:plain
10行表示に変わりました(^^)

ページング表示の位置決め

デフォルトでは、一覧の上下両方にページングが出ます。
これはpaginatorPosition属性のデフォルトが「both」になっているためです。

この属性は「top」「bottom」に変更が可能で、各々以下のようになります。

topの場合

<p:dataTable id="dt" var="book" value="#{bookBean.bookList}" sortMode="multiple"
                         paginator="true" rows="5" rowsPerPageTemplate="5,10,15"
                         paginatorPosition="top">

上だけにページング項目が表示されます。
f:id:kikutaro777:20130401214424j:plain

bottomの場合

<p:dataTable id="dt" var="book" value="#{bookBean.bookList}" sortMode="multiple"
                         paginator="true" rows="5" rowsPerPageTemplate="5,10,15"
                         paginatorPosition="bottom">

下だけにページング項目が表示されます。
f:id:kikutaro777:20130401214458j:plain

ページング表示内容の変更

ページング部分の項目はデフォルトだと左から

先頭ページを表示するリンクボタン
前ページを表示するリンクボタン
ページリンク
次ページを表示するリンクボタン
最終ページを表示するリンクボタン

の構成となっています。

これはpaginatorTemplate属性で変更可能です。デフォルトは各々(上記と対応してます)

{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}

となっています。

例えば、リンクボタンは前ページと次ページだけにして、真ん中に現在の表示ページを表示する場合は

<p:dataTable id="dt" var="book" value="#{bookBean.bookList}" sortMode="multiple"
                         paginator="true" rows="5" rowsPerPageTemplate="5,10,15"
                         paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink}">