jsf - Primefacesデータテーブルでページネーションをカスタマイズする方法

Question

Primefaces Datatableには、ページネーションを調整するための多くのオプションがあります。次の画像のようにPaginatorを作成する必要があります：

誰かがそれを行う方法を知っていますか？知っている場合は、別の方法を提案してください。

Answer 1

PrimeFacesDataTableRendererを拡張し、オーバーライドしますencodePaginatorMarkup()。

import org.primefaces.component.datatable.DataTableRenderer;

public class MyDataTableRenderer extends DataTableRenderer {

    @Override
    protected void encodePaginatorMarkup(FacesContext context, DataTable table, String position, String tag, String styleClass) throws IOException {
        // Copypaste here the original PF source code and make modifications where necessary.
    }

}

（メソッドのソースコードは、拡張元のDataRendererクラスにあります）

次に、実行するには、次のように登録しますfaces-config.xml。

<render-kit>
    <renderer>
        <description>Overrides the PrimeFaces table renderer with customized paginator.</description>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.DataTableRenderer</renderer-type>
        <renderer-class>com.example.MyDataTableRenderer</renderer-class>
    </renderer>
</render-kit>

Answer 2

上記のようにPrimeFacesを拡張してDataTableRendererオーバーライドする代わりに、サポートされているpaginator要素の標準セットに独自の実装を追加できます。encodePaginatorMarkup()org.primefaces.component.paginator.PaginatorElementRenderer

これは、JSFApplicationFactory実装で次の静的メソッドを呼び出すことで実現できます。

org.primefaces.renderkit.DataRenderer.addPaginatorElement("{myPaginator}", new MyPaginatorImplementation());

その後、クラスを追加する必要があります。MyPaginatorImplementationこのクラスは、インターフェイスを実装する必要がありますorg.primefaces.component.paginator.PaginatorElementRenderer。

PageLinksRenderer出発点として、PrimeFacesクラスからカスタマイズを開始できます。

public class MyPaginatorImplementation implements PaginatorElementRenderer {

    public void render(FacesContext context, UIData uidata) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        int currentPage = uidata.getPage();
        int pageLinks = uidata.getPageLinks();
        int pageCount = uidata.getPageCount();
        int visiblePages = Math.min(pageLinks, pageCount);

        //calculate range, keep current in middle if necessary
        int start = Math.max(0, (int) Math.ceil(currentPage - ((visiblePages) / 2)));
        int end = Math.min(pageCount - 1, start + visiblePages - 1);

        //check when approaching to last page
        int delta = pageLinks - (end - start + 1);
        start = Math.max(0, start - delta);

        writer.startElement("span", null);
        writer.writeAttribute("class", UIData.PAGINATOR_PAGES_CLASS, null);

        for(int i = start; i <= end; i++){
            String styleClass = currentPage == i ? UIData.PAGINATOR_ACTIVE_PAGE_CLASS : UIData.PAGINATOR_PAGE_CLASS;

            writer.startElement("span", null);
            writer.writeAttribute("class", styleClass, null);
            writer.writeAttribute("tabindex", 0, null);
            writer.writeText((i + 1), null);
            writer.endElement("span");
        }

        writer.endElement("span");
    } 
}

これで、PrimeFacesが提供する標準的な方法でXHTMLでこれを使用できます。

<p:dataTable paginatorTemplate="{myPaginator}" />

他のオプションに対するこの代替手段の利点は次のとおりです。

• UIData要素の情報（最初と最後に表示された行など）を使用できます。これは、datalist/datatableのカスタムファセットでは使用できません。
• これをアプリケーションのすべてのデータテーブルやデータリストで再利用して、xhtmlでのテンプレートの重複コーディングを防ぐことができます。

ただし、追加のJavaコードが必要になります。

Answer 3

あなたが望むことを達成する簡単な方法はないと思います。現在、のPaginator Templateはp:dataTable、次のオプションをサポートしています。

1. CurrentPageReport
2. FirstPageLink
3. PreviousPageLink
4. NextPageLink
5. LastPageLink
6. PageLinks
7. RowsPerPageDropdown
8. JumpToPageDropdown

org.primefaces.renderkit.DataRendererこれらのオプションを利用できるクラスのソースコードを調べてください。カスタムデータテーブルを開発するか、ソースを変更することによって、あなたがしたいこと。Primefacesには現在ありません。

Answer 4

使用してみてください{RowsPerPageDropdown} of {totalPage}