CODEWITHSUNDEEP
jsfprimefaces
Kishor Prakash
Kishor Prakash

Reputation: 8171

How to customize Pagination in Primefaces Data Table

Primefaces Datatable have lot of options to arrange pagination. I have a requirement to make Paginator as in following image :

enter image description here

Does any one have any idea how to do that. Please Suggest any alternate ways, if you know.

Upvotes: 3

Views: 13098

Answers (4)

Frederieke Scheper
Frederieke Scheper

Reputation: 91

Instead of extending the PrimeFaces DataTableRenderer and overriding encodePaginatorMarkup() as suggested above, you can add your own implementation of the org.primefaces.component.paginator.PaginatorElementRenderer to the standard set of supported paginator elements.

This can be achieved by calling the following static method in your JSF ApplicationFactory implementation:

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

Subsequently you need to add the MyPaginatorImplementation class, which must implement the interface org.primefaces.component.paginator.PaginatorElementRenderer.

As a starting point, you can begin your customization from the PrimeFaces PageLinksRenderer class, e.g.

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");
    } 
}

Now you can use this in your XHTML in the standard way provided by PrimeFaces, e.g.

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

The advantages of this alternative to the other options are:

  • You can use the information in the UIData element (such as the first and last displayed row). This is not available in custom facets in the datalist / datatable.
  • You can reuse this in every datatable and/or datalist in your application, preventing duplicate coding of your templates in the xhtml.

But at the cost of the extra java code required.

Upvotes: 6

BalusC
BalusC

Reputation: 1109422

Extend PrimeFaces DataTableRenderer and override 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.
    }

}

(you can find source code for the method in the DataRenderer class it is extending from)

Then, to get it to run, register it as follows in 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>

Upvotes: 9

javadev
javadev

Reputation: 1669

Try to use {RowsPerPageDropdown} of {totalPage}

Upvotes: 0

Tapas Bose
Tapas Bose

Reputation: 29816

I don't think there is a easy way to achieve what you want. Currently the Paginator Template of p:dataTable supports the following options:

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

Look into the source code of the class org.primefaces.renderkit.DataRenderer you can have these options available. What you want you need to do by developing custom datatable or by modifying the source. Primefaces currently don't have it.

Upvotes: 0

Related Questions