Pagination and Sorting using Display tag Tutorial

Display tag library is a open source suite which can be used for displaying tables. The dispaly tag library also helps in paging , sorting , grouping and exporting of the data. In the following example we will see how to dispaly data using display tag and to do pagination and sorting.

The following jar files should be placed in the WEB-INF/lib directory

• antlr
• commons-beanutils
• commons-beanutils-1.7.0
• commons-collections-3.1
• commons-digester
• commons-fileupload-1.0
• commons-lang-2.3
• commons-logging
• commons-validator
• displaytag-1.2
• displaytag-export-poi-1.2
• displaytag-portlet-1.2
• itext-1.3
• jakarta-oro
• log4j-1.2.13
• struts
  

The following tag extension should be placed in each JSP page that uses the display taglib.

<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

In this example we will display a list of actor's details like name, email Id and the TV show in which they performed. In this example we have a ActorData class which store the actor's details like name, email id and the tv show. The ActorData class has a loadData() method which returns an ArrayList of all the actor details.

The following attributes and methods are present in the ActorData class.

public class ActorData
{
  private String tvShow;
  private String userName;
  private String emailId;
  public ActorData()
  {

  }

  public ActorData(String tvShow, String userName, String emailId)
  {
  this.tvShow = tvShow;
  this.userName = userName;
  this.emailId = emailId;
  }
  public ArrayList loadData()
  {
      ArrayList userList = new ArrayList();
      userList.add(new ActorData("The Office","Michael Scott",
            "michael.scott@dundermifflin.com"));
      userList.add(new ActorData("The Office","Dwight Schrute",
            "dwight.schrute@dundermifflin.com"));
      userList.add(new ActorData("The Office","Jim Halpert",
            "jim.halpert@dundermifflin.com"));
      userList.add(new ActorData("The Office","Pam Beesly",
            "pam.beesly@dundermifflin.com"));
      userList.add(new ActorData("The Office","Andy Bernad",
            "andy.bernad@dundermifflin.com"));
      userList.add(new ActorData("The Office","Angela Martin",
            "angela.martin@dundermifflin.com"));
      userList.add(new ActorData("Friends","Rachel Green",
            "rachel.green@friends.com"));
      userList.add(new ActorData("Friends","Monica Geller",
            "monica.geller@friends.com"));
      userList.add(new ActorData("Friends","Phoebe Buffay",
            "phoebe.buffay@friends.com"));
      userList.add(new ActorData("Friends","Joey Tribbiani",
            "joey.tribbiani@friends.com"));
      userList.add(new ActorData("Friends","Chandler Bing",
            "chandler.bing@friends.com"));
      userList.add(new ActorData("Friends","Ross Geller",
            "ross.geller@friends.com"));
      return userList;
  }
  public String getTvShow() {
    return tvShow;
  }
  public String getUserName() {
    return userName;
  }
  public String getEmailId() {
    return emailId;
  }

}

Inside the execute() method in UserAction, the loadData() method of ActorData class is called. This method will return an ArrayList of actors, that ArrayList is stored in the actorList attribute of the UserForm class.

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
    UserForm userForm = (UserForm) form;
    ActorData actorData = new ActorData();
    userForm.setActorList(actorData.loadData());
    return mapping.findForward(SUCCESS);
}

Now we will display all the actor data present in the actorList in the jsp page using dispalytag.

<display:table id="data" name="sessionScope.UserForm.actorList" requestURI="/userAction.do" pagesize="10" >
    <display:column property="tvShow" title="TV Show" sortable="true"/>
    <display:column property="userName" title="User Name" sortable="true"/>
    <display:column property="emailId" title="Email Id" sortable="true"/>
</display:table>

The name attribute of the table tag hold the name of the list in the form. The id value specifies an instance name for the ArrayList. The pagesize attribute holds the number of records to be displayed in each page.

The requestURI attribute of the table tag contains the action name. When using Tiles if the requestURI is not specified it will through an error when the user navigates to a different page.

The property attribute of the column tag hold the value of the property to be displayed in this each column. The value of the property can be any one of the property of the ActorData class. The ActorData class should have a getter method for that corresponding property. For instance if the property name is tvShow then their should be a corresponding getTvShow() method in the ActorData class.

If the sortable attribute of the column tag is set to "true" then that column will be sortable.

The following image shows the first page of the data grid. Since the pagesize is set to ten, ten records are displayed in the first page.

Now the page is sorted base on the user name.

You can download the source code of the displaytag example by clicking on the Download link below.