Paginated List in JSF 2.0

Pagination is the recommended pattern when you have a very large list to display. This reduces network I/O from the database and the web server. It may also reduce disk I/O in the database, although that depends on the database and several other factors.

Starting with JSF 2.0, the right and easy way to implement pagination is using GET request. As a general rule, you should avoid POST for any request that renders HTML. POST is used for display generation only if you need AJAX support. That’s because, in JSF 2.0, AJAX is supported for POST requests only.

In this article, I will explain how to implement pagination using GET request. I will write another article that shows how to do pagination using POST and AJAX.

The Managed Bean

The managed bean needs to keep track of the start index of the page. It will look something like this.

public class Controller {
  List<UserBean> userList;
  int startIndex=0, pageSize=10;
  public List<UserBean> getUserList() {
    if (userList == null) {
    return userList;
  public void loadUserList() {
    //Fetch paged data from the database
    userList = dao.getAllUsersPaged(startIndex, pageSize);
  //Various getters and setters omitted for brevity

The View XHTML

Let’s say that you are rendering a list as follows:

    <f:viewParam name="startIndex" value="#{siteAdmin.startIndex}" />
    <f:event listener="#{siteAdmin.loadUserList()}" type="preRenderView"/>

<h:link outcome="user_list" value="Previous">
  <f:param name="startIndex" value="#{mbean.startIndex - mbean.pageSize}" />
<h:link outcome="user_list" value="Next">
  <f:param name="startIndex" value="#{mbean.startIndex + mbean.pageSize}" />
   <th>Name</th> <th>E-mail</th>
 <ui:repeat value="#{mbean.userList}" var="user">
   <td>#{}</td> <td>#{}</td>

In the XHTML page, first study the metadata section. We can manipulate the startIndex property of the managed bean by sending a startIndex URL parameter.

When next or previous navigation link is clicked, a GET request will be sent. The startIndex URL parameter will be added. For example: “user_list.xhtml?startIndex=10”. JSF will first update the startIndex property of the managed bean from the value in the URL parameter. It will then call loadUserList() since that is the pre-render listener. This method will then load the correct page of the list since startIndex has been already modified.

Now, all there is left to do is disable Next and Previous links depending on if you are already on the first or last page. This is actually quite easy. I will leave a few hints:

  • Disable Previous link if mbean.startIndex is 0.
  • Disabling the Next link is a little more complicated. When requesting data from the database, ask for one more row than the page size. If the returned number of rows is more than or equal to the page size, then you know that there is no more items left.

This solution using GET request will perform well. We do not store the managed bean in session or view scope. This lowers memory requirement.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.