Struts2 pagination using display tag

The display tag library is an open source suite of custom tags that provide high-level web presentation patterns which will work in an MVC model. The library provides a significant amount of functionality while still being easy to use.

Actually the display tag library can just display tables! Give it a list of objects and it will handle column display, sorting, paging, cropping, grouping, exporting, smart linking and decoration of a table in a customizable XHTML style.

download The latest snapshot builds can be downloaded directly from the displaytag maven 2 repository >>

Create A Dynamic web project and make sure that following libraries are in your WEB-INF/lib directory :

You may want to include also the displaytag-export-poi jar which adds an excel binary export using jakarta POI. required displaytag-export-poi.jar

Define the tag extension in JSP page that uses the display tag :-

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

Tag reference:-

caption Simple tag html caption tag.
column Displays a property of a row object inside a table.
footer tag to provide a custom table footer.
setProperty Sets the indicated property on the enclosing Table tag.
table Displays a list in an html table.


This example starts to show you how to use the table tag:-

Web.xml:-

    
    
        struts2
        org.apache.struts2.dispatcher.FilterDispatcher
    
    
    
        struts2
        /*
    
    
   
       index.jsp
   

struts.xml:-

    
    
    
    
    
    
        
        
            /WEB-INF/jsp/displaytag.jsp
        
        
    

EmployeeAction- Action Class

import java.util.ArrayList;
import java.util.List;

import com.javastoreroom.bean.Employee;
import com.opensymphony.xwork2.ActionSupport;

public class EmployeeAction extends ActionSupport {

 /**
  * 
  */
 private static final long serialVersionUID = 1L;

 private List employees = new ArrayList();

 public String fetchEmployeeList() {

  employees.add(new Employee("001", "Arun", "java", 5000));
  employees.add(new Employee("002", "Anu", "java", 6000));
  employees.add(new Employee("003", "Aryan", "java", 8000));
  employees.add(new Employee("004", "Alex", "php", 1000));
  employees.add(new Employee("005", "Jass", ".net", 10000));
  employees.add(new Employee("006", "Jassica", "java-script", 15000));
  employees.add(new Employee("007", "Akon", "sql", 5050));
  employees.add(new Employee("008", "Himesh", "oracle", 4000));
  employees.add(new Employee("009", "Sonu", "perl", 8000));
  employees.add(new Employee("010", "Jon", "apple-script", 4000));
  employees.add(new Employee("011", "Andrew", "Html", 8000));
  employees.add(new Employee("012", "Raj", "Design", 9000));
  employees.add(new Employee("013", "Nikoles", "java", 4500));
  return SUCCESS;
 }

 public List getEmployees() {
  return employees;
 }

 public void setEmployees(List employees) {
  this.employees = employees;
 }

}

Employee- Bean Class

package com.javastoreroom.bean;

public class Employee {

 private String employeeCode;
 private String employeeName;
 private String department;
 private int salary;

 
 public  Employee(String empcode,String name,String department,int salary){
 
  this.employeeCode=empcode;
  this.employeeName=name;
  this.department=department;
  this.salary=salary;

 }
 
 public String getEmployeeCode() {
  return employeeCode;
 }

 public void setEmployeeCode(String employeeCode) {
  this.employeeCode = employeeCode;
 }

 public String getEmployeeName() {
  return employeeName;
 }

 public void setEmployeeName(String employeeName) {
  this.employeeName = employeeName;
 }

 public String getDepartment() {
  return department;
 }

 public void setDepartment(String department) {
  this.department = department;
 }

 public int getSalary() {
  return salary;
 }

 public void setSalary(int salary) {
  this.salary = salary;
 }

}

Index.jsp

<%response.sendRedirect("fetchEmployeeList.html"); %>

displaytag.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="display" uri="http://displaytag.sf.net"%>













 

After executing the project, you will get the following output :



If you want replace(Fast/Next or Previous/Last) to image add these properties:-

paging.banner.full=


{0}


paging.banner.first=


{0}


paging.banner.last=


{0}

Now you will get the following output :


Auto-sorting
Here i am discuss more feature of display tag If you want to allow the user to sort the data then set the attribute sortable="true" on the columns that you want to be able to sort by. When the user clicks on the column title the rows will be sorted in ascending , descending order and redisplayed on the page :-

 //--Sortable property true

add these images in you images folder : arrow_down.png, arrow_off.png , arrow_up.png these images reference by css :-

th.sortable a {
    background-image: url("../images/arrow_off.png");
    background-repeat: no-repeat;
}
th.order1 a {
    background-image: url("../images/arrow_down.png");
    background-repeat: no-repeat;
}
th.order2 a {
    background-image: url("../images/arrow_up.png");
    background-repeat: no-repeat;
}

when all these done execute project below result are shown :-


Data exporting
When you set the Table Tag's export attribute to "true", a footer will appear below the table which will allow you to export the data being shown in various formats. If you need to change what you output based on the destination, use the media attribute of the Column Tag. :-

 //--export true

add these images in you images folder : ico_file_csv.png ,ico_file_excel.png, ico_file_pdf.png ,ico_file_rtf.png ,ico_file_xml.png images reference by css.

span.excel {
    background-image: url("../images/ico_file_excel.png");
    background-repeat: no-repeat;
}
span.csv {
    background-image: url("../images/ico_file_csv.png");
    background-repeat: no-repeat;
}
span.xml {
    background-image: url("../images/ico_file_xml.png");
    background-repeat: no-repeat;
}
span.pdf {
    background-image: url("../images/ico_file_pdf.png");
    background-repeat: no-repeat;
}
span.rtf {
    background-image: url("../img/ico_file_rtf.png");
    background-repeat: no-repeat;
}

Now the table :-



Caption & footer
You can use the tag to add a caption to your table. The caption tag should be nested directly into the table tag. It supports all the standard html caption tag attributes (title, id, class, style, lang and dir).

If you need to add a table footer with totals, static code, etc. you can nest a tag inside the main table tag. All the content in the footer will be evaluated only once and written at the end of the table, wrapped in a tfoot html tag.

Displaying All Employee  Record //Caption
  

          Total Employee
          Final Salary Amount
        
    

Now Display Table Look :- Row number in display table If you add id attribute the table tag makes the object corresponding to the given row available in the page context so you could use it inside script-let , JSTL or some other tag. Another implicit object exposed by the table tag is the row number, named id_rowNum . These objects are saved as attributes in the page scope (you can access it using pageContext.getAttribute("id") ). They are also defined as nested variables (accessible using <%=id%> ), but only if the value of the id attribute is not a runtime expression. The preferred way for fetching the value is to always use pageContext.getAttribute(). If you do not specify the id attribute no object is added to the pageContext by the table tag.DisplayTag feature that bind the row number of an item.

id="txt"name="employees" requestURI=""  pagesize="10" cellpadding="2px;" cellspacing="2px;" style="margin-left:450px;margin-top:20px;">
 ${txt_rowNum} //column show every row number 

in above case txt is table id appending with _rowNum to the variable to get the row number. now after execution table will shown like this :-