Learn Java , .Net , Paython : for Beginners, Intermediate, and Advanced Programmers in Palampur

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

freeze table header and left column

While i am freeze table header or first column , Google to find .There are lot's of way to do it. I try via jquery but it conflict some existing js. After spanding a 2-3 day find a script to do this and optimize to less and it's work there are 5-6 number of line in JavaScript and some css.it's run without any conflict or error and working on all browser.

If you would like to create a table with scrollable data. I have to freeze the first header row and first column of the table.Below is example :-
style.css

.midcontainer {
 width: 100%;
 height: 200px;
 table-layout: fixed;
}

table.root {
 table-layout: fixed;
 width: 100%;
}

table.content {
 table-layout: fixed;
 width: 100%;
}

table.head {
 table-layout: fixed;
 width: 1890px;
}

table.frozen {
 table-layout: fixed;
 width: 100%;
}

.horizontal-scroll {
 width: 98%;
 height: 22px;
 overflow: hidden;
 overflow-x: scroll;
}

.horizontal-scroll div {
 width: 2173px;
 height: 1px;
}

.vertical-scroll {
 height: 200px;
 width: 22px;
 overflow: hidden;
 overflow-y: scroll;
 /* border: solid 1px #666; */
}

.vertical-scroll div {
 height: 377px;
 width: 1px;
}

.columnStyle {
 padding: 3px;
 height: 28px;
 border-collapse: separate;
 border-color: -moz-use-text-color #CCCCCC #CCCCCC -moz-use-text-color;
 border-style: none dotted solid none;
 border-width: 0 1px 1px 0;
 border-color: -moz-use-text-color #CCCCCC #CCCCCC -moz-use-text-color;
 border-style: none dotted solid none;
 width: 200px;
 overflow: hidden;
 text-overflow: ellipses;
 white-space: nowrap;
}

td {
 border-left: none;
 width: 100 px;
 text-align: left;
}

td.head {
 background-color: #CAEBFA;
}

div.root {
 margin-left: 0px;
 overflow: hidden;
 width: 100%;
 height: 28px;
}

.frozen {
 overflow: hidden;
 width: 100%;
 height: 200px;
}

.divhead {
 overflow: hidden;
 height: 28px;
 width: 100%;
}

.content {
 height: 200px;
 overflow-x: hidden;
 overflow-y: auto;
 width: 100%;
 width: 100%;
}

.tableumn {
 width: 150px;
}

.tablecontent {
 width: 501px;
}

.tableverticalscroll {
 width: 2px;
}

Scroll.html

 
    


        
Name
       
        
Arun
       
        
Aryan
       
        
Jessica
       
        
Renu
       
        
Manisha
       
        
Arrus
       
        
Rehan
       
        
Riyaj
       
        
Palak
       
        
Jessica
       
    


         
Class
 
Roll No
         
Ref
         
City
         
H.No
         
Country
         
Opening Timing
         
Closing Timing
         
Section
         
Other
        
  
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
       
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
 
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
 
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
        
Chandigrah
       
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
     
    
     


   

:) Done May be this help you and save some value able time

below is image while run:-

even odd row index in thymeleaf

If you want to change row color in even odd pattern in table try this example :-

:)