Now a days, web site content is growing in volume and enterprises are planning to push more data access to the consumers. Content structure and hierarchy reduces complexity and improves readability. The more we organize the information on the web-sites, the easier it is for users to follow the information directed at them and get the message that is being delivered. On the Web, this can be done in a variety of ways.

Pagination is one such mechanism for structuring large content on the web site. Here are few variants of pagination you see on some of the popular websites on web.

Search engines also use pagination; blogs tend to make use of it for navigation through the parts of rather large articles. Properly implemented navigation can simplify the access to site pages — e.g. make it easier for users to browse through the archives of the site. It’s not a must, but a useful nice-to-have-feature. I am also introducing pagination in my next template change for this website.

Let’s take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented.

• Provide large click able areas.
• Don’t use underlines.
• Identify the current page.
• Space out page links.
• Provide Previous and Next links.
• Use First and Last links (where applicable).
• Put First and Last links on the outside.

Challenges in Implementing Pagination for a JSF Portlet

HtmlPanelGroup is that even though one has defined assessors and mutators for the UI .

The problem associated with working with JSF UI elements like HtmlPanelGrid or element, the assessors is rendered for the first time the JSP (in which the UI element is contained) is loaded, for every other time the mutators are rendered for every time the JSP is loaded. So the challenge is that, one has to reform the HtmlPanelGrid every time it demands a change. One easiest and perhaps the best way possible to solve the problem is to implement an ActionListener method for the Button from which one will do the needful to reform the HtmlPanelGrid.

Solution for pagination

Sequence Diagram

Once a user clicks on the ‘Search’ button the Container (marked as ActionListener in the diagram) calls the searchLocation method of the SearchLocationBean. This method accesses the backend system to populate the entire list on which the pagination will occur.

The following activities occur in the Search Button

• The Search Button access the backend service to get the entire record set for the provided search criteria.
• The entire record set is stored in the temporary storage by the method putObjectInStorage(Object inputObject)and based upon simple calculation a subset of the entire record set (for page no 1) is returned by the method getRecordSet(Object inputObject) both these methods belong to the class SearchBean and the base method is getListToDisplay(Object inputObject).
• After the list, which will be displayed for the first page has been formed; the next target is to form the links for the given set of record. An object of type HtmlPanelGrid has been dynamically bound with ‘Search’ button by the method reFormPanelAfterSubmit.

The diagram below depicts the sequence of events, that take place in the reFormPanelAfterSubmit method.

Sequence Diagram

The Page No buttons are created from the method getCellComponent(Object columnId) and each page no button is bound to reFormPanel() method of CreatePaginationBean by the action attribute, and to the method searchMethodForAllPagesAndButtons of the Managed Bean using the actionListener attribute.

Sequence Diagram

Once a user clicks on a particular Page No. button the Container (marked as ActionListener in the diagram) calls the searchMethodForAllPagesAndButtons method of the SearchLocationBean using the actionListener attribute. This method access the temporary storage to populate the sub set of the entire list which will be displayed for that particular button which has been clicked.

The following activities occur in a Page No. Button

• The searchMethodForAllPagesAndButtons method of the SearchLocationBean is called by the container(marked as ActionListener in the diagram) using the actionListener attribute. The container also calls reFormPanel using the action attribute.
• The searchMethodForAllPagesAndButtons method access the temporary storage to populate the sub set of the entire list which will be displayed for that particular button which has been clicked.
• The reFormPanel method is responsible for reforming the pagination panel after a button has been clicked.

The following sequence of events takes place in the reFormPanel method.

Sequence Diagram

The Page No buttons are created from the method getCellComponent(Object columnId) and each page no button is bound to reFormPanel() method of CreatePaginationBean by the action attribute, and to the method searchMethodForAllPagesAndButtons of the Managed Bean using the actionListener attribute.

• The Previous Button is created from the method getPrevious and it is bound to goToPreviousPage method of CreatePaginationBean by the action attribute, and to the method searchMethodForAllPagesAndButtons of the Managed Bean using the actionListener attribute.

The Next Button is created from the method getNext and it is bound to goToPage method of CreatePaginationBean by the action attribute, and to the method searchMethodForAllPagesAndButtons of the Managed Bean using the actionListener attribute.