DisplayTag Search with Spring MVC

This example show how add search filter in display tag.It's work same as it Displaytag table search Here you can find more info for display:header tag if you want to implement this first visit this link here you can find what you need to add search filter in table :-

Spring + display tag example is here :- Spring + display tag integration example you just need to replace displayTag.jsp to this and add 2 js file to do this:-

jquery.js
jquery.dataTables.min.js

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net/el"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>








 
  
  
  
  
  
  
  
 
 
 

Done :) Here Is output

Spring MVC and DisplayTag Example , Pagination

Here I am posting display tag example with Spring. If you need more info about display tag refer this example :-Struts2 pagination using display tag

web.xml

 Spring3Example
 
  dispatcher
  org.springframework.web.servlet.DispatcherServlet
  1
 
 
  dispatcher
  /forms/*
 
 
  index.jsp
 

dispatcher-servlet.xml

 
 

 
 

  
   /WEB-INF/views/
  
  
   .jsp
  
 
 
 
 

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>







View User Info

bootstrap.min.css
displayTag.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net/el"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>








 
  
  
  
  
  
  
  
 

user.java

package com.javastoreroom.bean;

public class User {

 private String name;
 private String firstName;
 private String lastName;
 private String nickName;
 private String modernName;
 private String section;
 private String address;

 public User(String names, String first, String last, String nick,
   String modren, String section, String address) {
  this.name = names;
  this.firstName = first;
  this.lastName = last;
  this.nickName = nick;
  this.modernName = modren;
  this.section = section;
  this.address = address;

 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getFirstName() {
  return firstName;
 }

 public void setFirstName(String firstName) {
  this.firstName = firstName;
 }

 public String getLastName() {
  return lastName;
 }

 public void setLastName(String lastName) {
  this.lastName = lastName;
 }

 public String getNickName() {
  return nickName;
 }

 public void setNickName(String nickName) {
  this.nickName = nickName;
 }

 public String getModernName() {
  return modernName;
 }

 public void setModernName(String modernName) {
  this.modernName = modernName;
 }

 public String getSection() {
  return section;
 }

 public void setSection(String section) {
  this.section = section;
 }

 public String getAddress() {
  return address;
 }

 public void setAddress(String address) {
  this.address = address;
 }

}

PaginateController

package com.javastoreroom.controllers;

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

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.javastoreroom.bean.User;

@Controller
@RequestMapping("displayTag.html")
public class PaginateController {

 @RequestMapping(method = RequestMethod.GET)
 public String fetchUserList(Model model) {

  List users = new ArrayList<>();

  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "A",
    "Palampur"));
  users.add(new User("Sonu Kumar", "Arun", "Kumar", "Anu", "Aryan", "B",
    "Palampur"));
  users.add(new User("Pawan Kumar", "Arun", "Kumar", "Anu", "Aryan", "C",
    "Palampur"));
  users.add(new User("Satish Kumar", "Arun", "Kumar", "Anu", "Aryan", "D",
    "Palampur"));
  users.add(new User("Arrus Kumar", "Arun", "Kumar", "Anu", "Aryan", "E",
    "Palampur"));
  users.add(new User("Rihan Kumar", "Arun", "Kumar", "Anu", "Aryan", "F",
    "Palampur"));
  users.add(new User("Rishav Kumar", "Arun", "Kumar", "Anu", "Aryan", "G",
    "Palampur"));
  users.add(new User("Test Kumar", "Arun", "Kumar", "Anu", "Aryan", "H",
    "Palampur"));
  users.add(new User("Hello Kumar", "Arun", "Kumar", "Anu", "Aryan", "J",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "K",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "L",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "M",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "N",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "O",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "P",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "Q",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "R",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "S",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "T",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "Q",
    "Palampur"));
  users.add(new User("Arun Kumar", "Arun", "Kumar", "Anu", "Aryan", "X",
    "Palampur"));
  model.addAttribute("userList", users);
  return "displayTag";

 }

}

Done :) here is out put :-

Displaytag table search

if you want to add search filter in display table header then you need (Add tag to insert additional header rows above the automatically generated one. )
Add a new tag, . If present, it specifies additional HTML to be rendered above the generated header row, but still in THEAD.
Displaytag doesn’t allow us to have a custom table header. We Need (displaytag-1.2.jar) with Rhett Sutphin’s patch.

Here i am refer the example :- Struts2 pagination using display tag

Requirement:-

1. (displaytag-1.2.jar) with Rhett Sutphin’s patch.
2. jquery.dataTables.min.js
3. jquery.js


Include these js in (displaytag.jsp) header & download dispalytag-1.2.jar with header patch after that add in your lib folder.


Now Add following script in displaytag.jsp:-

Now add tag in displaytag.jsp:-

Now Everything is done after executing project you get following result :-



Now you type search 001 code following result shown :-



if none of the matching record following result shown :-




If you want to change the look and feel display table add following css:-

1. bootstrap.min.css
2. displaytag-table.css

Now the table shown like this :-


ok everything is done.

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 :-