読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

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

PrimeFaces JSF 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}">

のように書くことで以下のようになります。
f:id:kikutaro777:20130401214543j:plain

ページング1つとっても結構色々なことができるので便利かと(^^)

にほんブログ村 IT技術ブログへ
にほんブログ村
にほんブログ村 IT技術ブログ Javaへ
にほんブログ村