Friday 25 April 2014

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"%>




Display Tag Pagination Display Tag



 
  
  
  
  
  
  
  
 
 
 





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"%>




Spring 3, Display tag Examples





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"%>




Display Tag Pagination Display Tag



 
  
  
  
  
  
  
  
 



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

Wednesday 16 April 2014

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



Freeze Table Header And Left Column


 

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

Monday 14 April 2014

even odd row index in thymeleaf



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


:)