Understanding Spring Container in Spring Framework

In previous tutorial of spring framework we have seen what dependency injection is and the usage of dependency injection. We have also seen the dependency object will be created and injected by Spring Container. In this tutorial we will what spring container is and the role of it in spring framework.

Understanding Spring Container or IOC Container

Spring Container is similar to Servlet Container, so if we understand the role of servlet container we will understand the Container as well.

Servlet Container

Servlet container will read configuration details (web.xml), instantiate the servlet object, pass the property values and manages the servlet life cycle starting from instantiation to destruction.

Spring Container

Similarly in Spring, Container will read configuration file, creates the object(s) and dependency object(s), inject the dependencies and manages the bean/pojo life cycles.

Spring Container or IOC Container in Spring

As mentioned in above figure Container will read xml file which contains configuration details about Pojo. Using Java Reflection, it will create dependency object along with all the required properties, also it will inject dependency object into our pojo classes.

In Spring, Container will read the configuration from xml file or through java annotation or by using Java Code. In our forthcoming tutorials we will see examples of each one.

Spring Container or IOC Container and its Types

Spring Container can also be specified as IOC container. IOC Container can be classified as two types

Core Container and
J2EE Container

Note:

We also have one more container in spring called Web Container.

Spring Core Container:

org.springframework.beans.factory.BeanFactory (Interface) implementation was provided by org.springframework.beans.factory.xml.XmlBeanFactory class.

J2EE Container:

org.springframework.context.ApplicationContext (Interface) extended by org.springframework.context.ConfigurableApplicationContext (Interface) and it’s has two important implementations i.e org.springframework.context.support.ClasspathXmlApplicationContext (class) and org.springframework.context.support.FileSystemXmlApplicationContext (class)

We also have other implementation like WebXmlApplicationContext and XmlWebApplicationContext which we will see in our future tutorials. We will also see in details about BeanFactory and ApplicationContext in the future details.

Please post your questions in the comment box, if you like this tutorial please share it with your friends.

How to Generate Excel in Spring MVC Application using Apache POI

In our earlier tutorial we have already seen How to Create Spring MVC application using Java Based Configuration. In this tutorial we will see some advance concepts of Spring MVC. In this tutorial we will see how to Generate Excel in Spring MVC Application using Apache POI.

How to Generate Excel in Spring MVC Application using Apache POI

I have already a created a tutorial of “How to Create Spring MVC application using Java Bsed Configuration”. This might help you in Creating a Spring Web Application. After creating a Spring MVC application we will be getting a project Structure like this. From that project structure we will add new files/code and generates excel using Spring MVC Application.

How to Generate Excel in Spring MVC Application using Apache POI – Project Structure

Getting Started – How to Generate Excel in Spring MVC Application using Apache POI

To generate Excel Document, we are going to use Apache Poi API. Lets add the below mentioned Dependency in pom.xml file.

<dependency>
      <groupId>org.apache.poi</groupId>
      <artifactId>poi</artifactId>
      <version>3.15</version>
 </dependency>

Java Change – How to Generate Excel in Spring MVC Application using Apache POI

Create a package and add a modal class into it. I have created Student class as mentioned below.

package com.learnfromexamples.springmvcjavaconfig.modal;

public class Student {
     private String studentId;
     private String studentName;
     private String studentMobileNum;
     
     public Student() {
          
     }
     public Student(String studentId, String studentName, String studentMobileNum) {
          super();
          this.studentId = studentId;
          this.studentName = studentName;
          this.studentMobileNum = studentMobileNum;
     }

     // getters and setters method
     //overriden toString() method
}

To build an Excel Document Spring provides an Abstract Class called “AbstractXlsView”. By Extending that, i have created a new class called “ExcelReportView” and overridden the buildExcelDocument() method. Inside that method we have provided our own implementation to build Excel Document.

package com.learnfromexamples.springmvcjavaconfig.view;

import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.springframework.web.servlet.view.document.AbstractXlsView;

import com.learnfromexamples.springmvcjavaconfig.modal.Student;


public class ExcelReportView extends AbstractXlsView{

 @Override
 protected void buildExcelDocument(Map<String, Object> model, Workbook workbook, HttpServletRequest request,
 HttpServletResponse response) throws Exception {
 
 response.setHeader("Content-Disposition", "attachment;filename=\"student.xls\"");
 List<Student> studentList = (List<Student>) model.get("studentList");
 Sheet sheet = workbook.createSheet("Student Data");
 Row header = sheet.createRow(0);
 header.createCell(0).setCellValue("Student ID");
 header.createCell(1).setCellValue("Student Name");
 header.createCell(2).setCellValue("Student Mobile");
 
 int rowNum = 1;
 for(Student student:studentList){
 Row row = sheet.createRow(rowNum++);
 row.createCell(0).setCellValue(student.getStudentId());
 row.createCell(1).setCellValue(student.getStudentName());
 row.createCell(2).setCellValue(student.getStudentMobileNum());
 }
 }
}

We already have a Controller for this project but for Segregation i have created a new one called “ReportController” with a method getExcel() which returns ModelAndView.

package com.learnfromexamples.springmvcjavaconfig.controller;

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

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import com.learnfromexamples.springmvcjavaconfig.modal.Student;
import com.learnfromexamples.springmvcjavaconfig.view.ExcelReportView;

@Controller
@RequestMapping("/report")
public class ReportController {
       @RequestMapping(method=RequestMethod.GET)
       public ModelAndView getExcel(){
              List<Student> studentList = new ArrayList<Student>(); 
              studentList.add(new Student("S01", "Sri", "12344"));
              studentList.add(new Student("S02", "Dharan", "658"));
              return new ModelAndView(new ExcelReportView(), "studentList", studentList);
       }
}

Lets add hyperlink in welcome.jsp with a associated url to RequestMapping.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>How to Generate Excel using Spring and Apache POI</title>
</head>
<body>
 <h1>Greeting : ${greetMsg}</h1>
 <spring:url value="/report" var="xlsURL"></spring:url>
 <a href="${xlsURL}">Excel Document</a>
</html>

Project Structure – Generate Excel in Spring MVC Application using Apache POI

Finally Our Project Structure will be like this.

How to Generate Excel in Spring MVC Application using Apache POI – Project Structure Final

Lets add the server and hit the URL. http://localhost:7171/SpringMVCJavaConfig/

How to Generate Excel in Spring MVC Application using Apache POI – Output

We will get Excel Document Like This

How to Generate Excel in Spring MVC Application using Apache POI – Output Excel

If you have any questions on Generate Excel in Spring MVC Application using Apache POI, please post your questions in Comment box. If you this tutorial please share it with your friends.

Advance Features of Jquery Datatable in Spring MVC with Example

Few months back we have seen one of the important jquery plugin called Jquery Datatable. Jquery Datatable provides many features like pagination, ordering, search etc. Although we have seen only some of its basic features. In this tutorial we are going to see advance features of jquery datatable in Spring MVC with example.

JQuery Datatable in Spring MVC with Example

Before going to see its advance features I recommend every one of you to know basic features of Jquery Datatable. In earlier tutorial we have created a Jquery Datatable application along with Spring MVC. This tutorial is a continuation of my previous Jquery Datatable tutorial, so we will be using same project structure and same files.

JQuery Datatable in Spring MVC with Example

Common.css

I have added few more styles for header, filters and for article tag in common.css

body{
 background-color: #eee;
}
img.dataTableExample{
 width:50%;
 padding-left: 25%;
}
div.dataTables_wrapper{
 padding-left:15%;padding-right:15%;
}
th {
 background-color: #4CAF50;
 color: white;
}
div.filters{
 background-color: ffffff;
 padding: 2%;
 
 color: #b72b21;
}
tr:nth-child(even) {background-color: #f2f2f2}
nav{
 width:20%;
 float: left;
}
ul{
 overflow-y: scroll;
 height: 200px;
 list-style-type: none;
}
h1{
 padding-left: 40%;padding-bottom: 10%;
}
h4{
 padding-left:40%;
}
article{
 width: 80%;
 float: right;
 border-left: 17%;
}

body.jsp

In body.jsp, i have added <header> tag, an empty <ul> tag and a submit <button> tag. Later using javascript code we are going to add <div> tags between <ul> tag.


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page session="false" %>
<html>
<head>
 <title>JQuery Datatable + Spring MVC Example</title>
</head>
<body>

<div style="width: 100%;">

<header>

<h1>Spring MVC + JQuery Datatable</h1>

 </header>


<nav>

<h4>Employee Names</h4>


<ul>
 </ul>

 <button style="margin-left: 35%;">Submit</button>
 </nav>


<article>

<table id="example" class="display nowrap" cellspacing="0">

<thead>

<tr>

<th>Name</th>


<th>Desgination</th>


<th>Salary</th>


<th>Country</th>

 </tr>

 </thead>

 </table>

 </article>

 </div>

</body>
</html>

<script type="text/javascript">
$(document).ready(function(){
      var data =eval('${employeeList}');
      var table = $('#example').DataTable( {
                    "aaData": data,
                    "aoColumns": [
                        { "mData": "name"},
                        { "mData": "desgination"},
                        { "mData": "salary"},
                        { "mData": "country"} 
                    ],
                   "columnDefs": [ 
                        { 
                           "render" : function(data, type, row) {
                            return "<a class='empId' value="+data+" href=#>" + data + "</a>";
                            
                        },
                   "targets" : 0
                   },
                 ],
                   "paging" : true,
                   "pageLength" : 5,
                    "ordering" : true,
     });
           getFilters(table.column(0).data().unique());
           $('a.empID').click(function(e){
                 var employeeInfo = table.row($(this).parents('tr')).data();
                 alert("Employee Details \n\n\n Employee Name is :" + employeeInfo['name'] +"\n Employee Designation is: "+ employeeInfo['desgination'] +" \n Employee Salary is : "+employeeInfo['salary'] );
           });
         $('button').on('click',function(e){
                if($('input[type="checkbox"]:checked').length&amp;amp;amp;lt;1){
                alert('Select atlease one employee');
         }else{
                 var employeeNames = $('input[type="checkbox"]:checked').map(function(){
                 return this.value;
              }).get();
         var employeeRegex = "";
         $.each(employeeNames,function(key,value){
               if(key!=employeeNames.length-1){
               employeeRegex+=value+"|";
         }else{
             employeeRegex+=value;
         }
     });
      $('#example').DataTable().search(employeeRegex,true,false).draw();
  }
 });
});

function getFilters(empName){
 $.each(empName,function(key,value){
 $('ul').append('
<div class="filters">
<li><input class="empName" type="checkbox" value="'+value+'">'+value+'</li>
</div>

');
 });

JQuery Datatable in Spring MVC with Example

JQuery Datatable provides lots of advance features and now we will see some of the features of JQuery Datatable in Spring MVC with Example.

JQuery Datatable Options

columnDefs: columnDefs option will be used if we want to do any manipulation in any of the table row/column.

render: In render option we have to write the actual DOM manipulation.

targets: Using target option we will specify the column where we are doing the manipulation.

JQuery Datatable in Spring MVC with Example

var table = $('#example').DataTable( {
 "aaData": data,
 "aoColumns": [
 { "mData": "name"},
 { "mData": "desgination"},
 { "mData": "salary"},
 { "mData": "country"} 
 ],
 "columnDefs": [ 
 { 
 "render" : function(data, type, row) {
 return "&amp;amp;amp;lt;a class='empId' value="+data+" href=#&amp;amp;amp;gt;" + data + "&amp;amp;amp;lt;/a&amp;amp;amp;gt;";
 },
 "targets" : 0
 },
 ],
 "paging" : true,
 "pageLength" : 5,
 "ordering" : true,
 });

Methods in jQuery Datatable

jQuery Datatable also provide lot of methods, we will see few of the methods in JQuery Datatable in Spring MVC with Example.

row: row method will be used if we want to get any of the row information or if we want to work with any of the row information.

data: data method is used to get values of any of the row(s) or column(s)

JQuery Datatable in Spring MVC with Example – Method – Unique


$('a.empID').click(function(e){
var employeeInfo = table.row($(this).parents('tr')).data();
alert("Employee Details \n\n\n Employee Name is :" + employeeInfo['name'] +"\n Employee Designation is: "+ employeeInfo['desgination'] +" \n Employee Salary is : "+employeeInfo['salary'] );
});

search: Search method used to filter the datatable based on the filters parameter passed as a parameter. And we want to search for more than one filter, then we have to append the filter value with “|” and pass as a filter parameter.

JQuery Datatable in Spring MVC with Example – Method – Search


$('button').on('click',function(e){
if($('input[type="checkbox"]:checked').length&amp;amp;amp;amp;amp;lt;1){
alert('Select atlease one employee');
}else{
var employeeNames = $('input[type="checkbox"]:checked').map(function(){
return this.value;
}).get();
var employeeRegex = "";
$.each(employeeNames,function(key,value){
if(key!=employeeNames.length-1){
employeeRegex+=value+"|";
}else{
employeeRegex+=value;
}
});
$('#example').DataTable().search(employeeRegex,true,false).draw();
}
});

In our example, when we select the checkboxes and click on submit button. Then we pass those values as a parameter to search method and datatable will be filtered.

Now we have seen some more features of jQuery datatable in Spring MVC with Example. If you want to discuss about some other features of datatable, please mention it in comment box and i will try to provide one more tutorial along with those features.

If you have any queries in this jQuery datatable in Spring MVC with Example tutorial please comment your queries below and if you like this tutorial please share it with your friends and colleagues.

Click below download link to get jQuery datatable in Spring MVC with Example.

JQuery Datatable in Spring MVC with Example

How to use Jquery datatable in Spring MVC

Nowadays in almost all web applications when the user requests for any information, the result will be shown in the form of tables, graphs or charts etc. But the story has never ended by showing the results to the user in the tabular format. Because now- a-days the client wants more features in HTML tables like pagination, filtering the records, sorting, no of records to show etc. Creating a table along with all these features is a difficult job for a developer because it involves lot of designs and coding. But now it becomes very easy for the developer to develop with the help of jQuery datatable plugin. In this tutorial I will show how to use jQuery datatable in Spring MVC application.

How to use jQuery Datatable in Spring MVC application

jQuery Datatable

jQuery Datatable is a plugin which has very high elasticity to HTML tables. Using this plugin we can customize the HTML table to include various features like pagination, sorting, filtering, searching, records per page etc. Let see some of its features with an examples

Visit : To Learn about Advance Features of JQuery Datatable

How to use jQuery datatable in Spring MVC application

I am going to have Spring MVC application to demonstrate this application. I already wrote an article of How to create Spring MVC application using Spring Tool Suite. This might help you in creating a web application.

After creating a Spring MVC application using Spring Tool Suite we will get a project structure like this. Of course you will not able to see Employee.java, JQueryDatatableController.java and some of the html and css files because those files are manually added by me.

Project Structure

How to use jQuery Datatable in Spring MVC application project structure

JQueryDatatableController

I have created a separate controller called JQueryDatatableController in which we are returning List of Employee objects as a JSON string.

package com.learnfromexamples.jquerydatatable;

import java.io.IOException;
import java.util.Locale;

import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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.learnfromexamples.jquerydatatable.service.LoadDataService;

/**
 * Handles requests for the application home page.
 */
@Controller
public class JQueryDatatableController {
    
    private static final Logger logger = LoggerFactory.getLogger(JQueryDatatableController.class);
    
    /**
     * Simply selects the home view to render by returning its name.
     * @throws IOException 
     * @throws JsonMappingException 
     * @throws JsonGenerationException 
     */
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home(Locale locale, Model model) throws JsonGenerationException, JsonMappingException, IOException {
        logger.info("Welcome home! The client locale is {}.", locale);
        LoadDataService dataService = new LoadDataService();
        ObjectMapper mapper = new ObjectMapper();
        model.addAttribute("employeeList", mapper.writeValueAsString(dataService.getEmployeeList()));
        return "home";
    }
    
}

To convert Java Object into JSON string I have used a Jackson api. Also instead of manually adding those jars, i have added those dependency in pom.xml file as below. So maven will take care of importing those jars.

     <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency>

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.learnfromexamples</groupId>
    <artifactId>jquerydatatable</artifactId>
    <name>SpringMVCandJQueryDataTable</name>
    <packaging>war</packaging>
    <version>1.0.0-BUILD-SNAPSHOT</version>
    <properties>
        <java-version>1.6</java-version>
        <org.springframework-version>4.1.1.RELEASE</org.springframework-version>
        <org.aspectj-version>1.6.10</org.aspectj-version>
        <org.slf4j-version>1.6.6</org.slf4j-version>
    </properties>
    <dependencies>
        <!-- Spring -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${org.springframework-version}</version>
            <exclusions>
                <!-- Exclude Commons Logging in favor of SLF4j -->
                <exclusion>
                    <groupId>commons-logging</groupId>
                    <artifactId>commons-logging</artifactId>
                 </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${org.springframework-version}</version>
        </dependency>
                
        <!-- AspectJ -->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjrt</artifactId>
            <version>${org.aspectj-version}</version>
        </dependency>    
        
        <!-- Logging -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>${org.slf4j-version}</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jcl-over-slf4j</artifactId>
            <version>${org.slf4j-version}</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>${org.slf4j-version}</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.15</version>
            <exclusions>
                <exclusion>
                    <groupId>javax.mail</groupId>
                    <artifactId>mail</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>javax.jms</groupId>
                    <artifactId>jms</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>com.sun.jdmk</groupId>
                    <artifactId>jmxtools</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>com.sun.jmx</groupId>
                    <artifactId>jmxri</artifactId>
                </exclusion>
            </exclusions>
            <scope>runtime</scope>
        </dependency>

        <!-- @Inject -->
        <dependency>
            <groupId>javax.inject</groupId>
            <artifactId>javax.inject</artifactId>
            <version>1</version>
        </dependency>
                
        <!-- Servlet -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    
        <!-- Test -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.7</version>
            <scope>test</scope>
        </dependency>  
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency>     
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <artifactId>maven-eclipse-plugin</artifactId>
                <version>2.9</version>
                <configuration>
                    <additionalProjectnatures>
                        <projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
                    </additionalProjectnatures>
                    <additionalBuildcommands>
                        <buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
                    </additionalBuildcommands>
                    <downloadSources>true</downloadSources>
                    <downloadJavadocs>true</downloadJavadocs>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>2.5.1</version>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                    <compilerArgument>-Xlint:all</compilerArgument>
                    <showWarnings>true</showWarnings>
                    <showDeprecation>true</showDeprecation>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <configuration>
                    <mainClass>org.test.int1.Main</mainClass>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Employee.java

We are going to show employee details in a HTML table, so I have created Employee object.

package com.learnfromexamples.jquerydatatable.modal;

public class Employee {
    private String Name;
    private String Desgination;
    private String Salary;
    private String Country;
    
    public Employee(String name, String desgination, String salary, String country) {
        this.Name = name;
        this.Desgination = desgination;
        this.Salary = salary;
        this.Country = country;
    }

    public String getName() {
        return Name;
    }

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

    public String getDesgination() {
        return Desgination;
    }

    public void setDesgination(String desgination) {
        this.Desgination = desgination;
    }

    public String getSalary() {
        return Salary;
    }

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

    public String getCountry() {
        return Country;
    }

    public void setCountry(String country) {
        this.Country = country;
    }
    
}

LoadDataService

In LoadDataService i have loaded Employee Objects into an Arraylist and those list are being returned to Controller.


package com.learnfromexamples.jquerydatatable.service;

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

import com.learnfromexamples.jquerydatatable.modal.Employee;

public class LoadDataService {
public static List<Employee> getEmployeeList(){
List<Employee> employeeList = new ArrayList<Employee>();
Employee employee1 = new Employee("Sridharan","Junior Blogger","5000","India");
Employee employee2 = new Employee("Arul Raj","Senior Blogger","105000","China");
Employee employee3 = new Employee("Priya","Associate","21000","Australia");
Employee employee4 = new Employee("Sam","Associate","20030","Australia");
Employee employee5 = new Employee("Ram","Associate","2020","Australia");
Employee employee6 = new Employee("Avinash","Associate","6000","Australia");
Employee employee7 = new Employee("Prabha","Associate","34000","Australia");
Employee employee8 = new Employee("Sweety","Associate","4000","Australia");
Employee employee9 = new Employee("Kinshuka","Programmer","12000","Japan");
Employee employee10 = new Employee("Leena","Programmer","12000","Japan");
Employee employee11 = new Employee("Chandra","Programmer","32000","Japan");
Employee employee12 = new Employee("Loga","Programmer","22000","Japan");
Employee employee13 = new Employee("Elumalai","Programmer","20700","Japan");
Employee employee14 = new Employee("Boosh","Senior Developer","2000","Taiwan");
Employee employee15 = new Employee("Edward","Senior Developer","5000","Taiwan");
Employee employee16 = new Employee("Niranjana","Senior Developer","7000","Taiwan");
Employee employee17 = new Employee("Murali","Senior Developer","2500","Taiwan");
Employee employee18 = new Employee("Krihna","Senior Developer","2700","Taiwan");
Employee employee19 = new Employee("Beema","Senior Developer","2250","Taiwan");
Employee employee20 = new Employee("Surya","Senior Developer","2720","Taiwan");
Employee employee21 = new Employee("Prakash","Senior Associate","2000","Russia");
Employee employee22 = new Employee("Raj","Senior Associate","2000","Russia");
Employee employee23 = new Employee("Chudambaram","Senior Associate","2000","Russia");
Employee employee24 = new Employee("Boosh","Senior Associate","112000","Russia");
Employee employee25 = new Employee("Elango","Senior Associate","322000","Russia");
Employee employee26 = new Employee("Sundar","Senior Associate","432000","Russia");
Employee employee27 = new Employee("Gnans","Senior Associate","252000","Russia");
Employee employee28 = new Employee("Sathy Nadela","Senior Associate","211000","Russia");
Employee employee29 = new Employee("Sundhar Pichai","Manager","2000","Singapore");
Employee employee30 = new Employee("Murari","Manager","234000","Singapore");
Employee employee31 = new Employee("Manimala","Manager","23000","Singapore");
Employee employee32 = new Employee("Sandhya","Manager","20800","Singapore");
Employee employee33 = new Employee("Praveen","Manager","20600","Singapore");
Employee employee34 = new Employee("Pradeep","Manager","20900","Singapore");
Employee employee35 = new Employee("Jairaj","Senior Manager","132000","UAE");
Employee employee36 = new Employee("Paresh","Senior Manager","2312000","UAE");
Employee employee37 = new Employee("Anurag","Senior Manager","1232000","UAE");
Employee employee38 = new Employee("Ashwini","Senior Manager","2342000","UAE");
Employee employee39 = new Employee("Naveen","Senior Manager","3232000","UAE");
Employee employee40 = new Employee("Abinav","Senior Manager","862000","UAE");
Employee employee41 = new Employee("Kamala","Senior Manager","5452000","UAE");
Employee employee42 = new Employee("Sai","Senior Vice President","232000","France");
Employee employee43 = new Employee("Kumar","Senior Vice President","5452000","France");
Employee employee44 = new Employee("Ganesh","Senior Vice President","562000","France");
Employee employee45 = new Employee("Rashid","Senior Vice President","56562000","France");
Employee employee46 = new Employee("Venu","Senior Vice President","542000","France");
Employee employee47 = new Employee("Sasi","Senior Vice President","562000","France");
Employee employee48 = new Employee("Pradeep","Vice President","122000","Italy");
Employee employee49 = new Employee("Kumar","Vice President","20300","Italy");
Employee employee50 = new Employee("Nirmala","Vice President","240600","Italy");
Employee employee51 = new Employee("Shymala","Vice President","200560","Italy");
Employee employee52 = new Employee("Padma","Vice President","203400","Italy");
Employee employee53 = new Employee("Prema","Vice President","7562000","Italy");
Employee employee54 = new Employee("Kirubha","Vice President","562000","Italy");
Employee employee55 = new Employee("Adithya","Assistant Manage","42000","Canada");
Employee employee56 = new Employee("Akileash","Assistant Manage","52000","Canada");
Employee employee57 = new Employee("Paresh","Assistant Manage","245000","Canada");
Employee employee58 = new Employee("Rashid","Assistant Manage","209400","Canada");
Employee employee59 = new Employee("Naveen","Assistant Manage","672000","Canada");
Employee employee60 = new Employee("Rajesh","Assistant Manage","642000","Canada");
Employee employee61 = new Employee("Abinav","Assistant Manage","542000","Canada");
Employee employee62 = new Employee("Loga","Senior Software Engineer","2342000","New Zealand");
Employee employee63 = new Employee("Chandra","Senior Software Engineer","200230","New Zealand");
Employee employee64 = new Employee("Sam","Senior Software Engineer","202300","New Zealand");
Employee employee65 = new Employee("Ram","Senior Software Engineer","231000","New Zealand");
Employee employee66 = new Employee("Venu","Senior Software Engineer","432000","New Zealand");
Employee employee67 = new Employee("Kinshuka","Senior Software Engineer","452000","New Zealand");
Employee employee68 = new Employee("Praveen","Senior Software Engineer","542000","New Zealand");
employeeList.add(employee68);
employeeList.add(employee67);
employeeList.add(employee66);
employeeList.add(employee65);
employeeList.add(employee64);
employeeList.add(employee63);
employeeList.add(employee62);
employeeList.add(employee62);
employeeList.add(employee61);
employeeList.add(employee60);
employeeList.add(employee59);
employeeList.add(employee58);
employeeList.add(employee57);
employeeList.add(employee56);
employeeList.add(employee55);
employeeList.add(employee54);
employeeList.add(employee53);
employeeList.add(employee52);
employeeList.add(employee51);
employeeList.add(employee50);
employeeList.add(employee49);
employeeList.add(employee48);
employeeList.add(employee47);
employeeList.add(employee46);
employeeList.add(employee45);
employeeList.add(employee44);
employeeList.add(employee43);
employeeList.add(employee42);
employeeList.add(employee41);
employeeList.add(employee40);
employeeList.add(employee39);
employeeList.add(employee38);
employeeList.add(employee37);
employeeList.add(employee36);
employeeList.add(employee35);
employeeList.add(employee34);
employeeList.add(employee33);
employeeList.add(employee32);
employeeList.add(employee31);
employeeList.add(employee30);
employeeList.add(employee29);
employeeList.add(employee28);
employeeList.add(employee27);
employeeList.add(employee26);
employeeList.add(employee25);
employeeList.add(employee24);
employeeList.add(employee23);
employeeList.add(employee22);
employeeList.add(employee21);
employeeList.add(employee20);
employeeList.add(employee19);
employeeList.add(employee18);
employeeList.add(employee17);
employeeList.add(employee16);
employeeList.add(employee15);
employeeList.add(employee14);
employeeList.add(employee13);
employeeList.add(employee12);
employeeList.add(employee11);
employeeList.add(employee10);
employeeList.add(employee9);
employeeList.add(employee8);
employeeList.add(employee7);
employeeList.add(employee6);
employeeList.add(employee5);
employeeList.add(employee4);
employeeList.add(employee3);
employeeList.add(employee2);
employeeList.add(employee1);
return employeeList;
}

@Override
public String toString() {
return "LoadDataService [getClass()=" + getClass() + ", hashCode()=" + hashCode() + ", toString()="
+ super.toString() + "]";
}

}

Under resource folder I have created three other folders called css, js, images to maintain the corresponding css, js and image files. This modularity in project structure will help us in good understanding of a application.

To get jquery datatable related styles we have to include jquery.dataTables.css and jquery.dataTables.min.css. Also I have included some of the jquery datatable images in images folder. Most importantly we have to include jquery js file and datatable js file. I have used jquery-1.12.1.min.js and jquery.dataTables.js in js folder.

Common.css

In common.css I have included our project specific stlyes like background color, table styles etc.

body{
    background-color: #eee;
}
img.dataTableExample{
    width:50%;
    padding-left: 25%;
}
div.dataTables_wrapper{
    padding-left:15%;padding-right:15%;
}
th {
    background-color: #4CAF50;
    color: white;
}
tr:nth-child(even) {background-color: #f2f2f2}

home.jsp

To get modularity in jsp’s I have created a separate folder called includes and created separate jsp files like header.jsp and body.jsp to perform corresponding actions alone. Also I have included all those jsp’s in the home.jsp.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page session="false" %>
<html>
<jsp:include page="includes/header.jsp"/>
<jsp:include page="includes/body.jsp"/>
<jsp:include page="includes/footer.jsp"/>

header.jsp

In header.jsp, I have included the css and js files alone.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page session="false" %>
<html>

    <spring:url value="/resources/js/jquery-1.12.1.min.js"     var="jqueryJs" />
        <script src="${jqueryJs}"></script>
    <spring:url value="/resources/js/jquery.dataTables.js"     var="datatable" />
        <script src="${datatable}"></script>
    <spring:url value="/resources/css/jquery.dataTables.css" var="jquerydataTables" />
        <link href="${jquerydataTables}" rel="stylesheet" />
    <spring:url value="/resources/css/jquery.dataTables.min.css" var="jquerydataTablesMin" />
        <link href="${jquerydataTablesMin}" rel="stylesheet" />
    <spring:url value="/resources/css/common.css" var="common" />
        <link href="${common}" rel="stylesheet" />

body.jsp

In body.jsp, at the top I have included an image, followed by I have created a html table along with header tags.

In <script> tag inside document.ready function I have taken JSON string and assigned it into a javascript variable called data.

Reason for eval function

In JQueryDatatableController we have assigned the JSON in employeeList and passed it to the view. In javascript we are using ${employeeList} to get those values. Also the values which we are returning from controller is not a actual JSON Object it’s a JSON string, Because writeValueAsString method will create the Java Object into JSON string only, not as a JSON Object. So in order to convert JSON Object to JSON Object we have used eval method.

Note:

Mostly it’s better to use JSON object as an input for dataTable plugin. Because apart from jquery Datatable built in customization, our user defined customization’s also will be easily accomplished if we use input as JSON object.


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page session="false" %>
<html>
<head>
<title>JQuery Datatable + Spring MVC Example</title>
</head>
<body>



<div>
<img class="dataTableExample" src="resources/images/JQueryDatatableandSpringMVC.png">
</div>






<table id="example" class="display" cellspacing="0" width="100%" style="overflow-x:auto">



<thead>



<tr>



<th>Name</th>






<th>Desgination</th>






<th>Salary</th>






<th>Country</th>



</tr>



</thead>



</table>



</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var data =eval('${employeeList}');
var table = $('#example').DataTable( {
"aaData": data,
"aoColumns": [
{ "mData": "name"},
{ "mData": "desgination"},
{ "mData": "salary"},
{ "mData": "country"}
]
});
});
</script>

jQuery Datatable Options

jQuery datatable provides various options for the HTML table. We will see some of the mandatory and important options here.

aaData: If we provide JSON object to this aaData, it will take care of forming html table.

aoColumns: In employee object we are having variables called name, designation etc. If we specify those attributes here then corresponding data will be picked for each column.

Hit the browser using this url :http://localhost:8080/jquerydatatable/

The result page will be like this.

How to use jQuery Datatable in Spring MVC application output

We have not used any other options, because by default jQuery datatable will provide Search, Records per page, pagination features etc. Also its very easy to configure it. Let’s see some of the example.

paginate: By default pagination will be true with 10 records per page. If we don’t want this option then make paginate as false.

Syntax:

“paginate”:false


<script type="text/javascript">
$(document).ready(function(){
var data =eval('${employeeList}');
var table = $('#example').DataTable( {
"aaData": data,
"aoColumns": [
{ "mData": "name"},
{ "mData": "desgination"},
{ "mData": "salary"},
{ "mData": "country"}
],
"paging":false
});
});
</script>

So the table will display without pagination.

How to use jQuery Datatable in Spring MVC application records per page

Ordering: By default ordering will be true for the table. If we want to disable that, we can use the option called “ordering“. If we make the ordering as false then if we click any column header then ordering will not happen.

Syntax:

ordering:false

<script type="text/javascript">
$(document).ready(function(){
    var data =eval('${employeeList}');
    var table = $('#example').DataTable( {
          "aaData": data,
          "aoColumns": [
            { "mData": "name"},
            { "mData": "desgination"},
            { "mData": "salary"},
            { "mData": "country"}
          ],
          "paging":true,
          "pageLength":20,
          "ordering":true
        });
});
</script>

How to use jQuery Datatable in Spring MVC application without sorting

order: If we want sort any columns either ascending or descending order, then use “order” option. In the below image you can see the column name is sorted alphabetically.

“order”:[0,”asc”]

<script type="text/javascript">
$(document).ready(function(){
    var data =eval('${employeeList}');
    var table = $('#example').DataTable( {
          "aaData": data,
          "aoColumns": [
            { "mData": "name"},
            { "mData": "desgination"},
            { "mData": "salary"},
            { "mData": "country"}
          ],
          "paging":true,
          "pageLength":20,
          "ordering":true,
          "order":[0,"asc"]
        });
});
</script>

How to use jQuery Datatable in Spring MVC application with sorting columns

We have seen only limited features of jQuery datatable in Spring MVC application. To know more its features, visit datatables.net

Learn from Examples

Tag Archives: Spring MVC

Understanding Spring Container in Spring Framework

Servlet Container

Spring Container

Spring Container or IOC Container and its Types

Spring Core Container:

J2EE Container:

How to Generate Excel in Spring MVC Application using Apache POI

Getting Started – How to Generate Excel in Spring MVC Application using Apache POI

Java Change – How to Generate Excel in Spring MVC Application using Apache POI

Project Structure – Generate Excel in Spring MVC Application using Apache POI

Advance Features of Jquery Datatable in Spring MVC with Example

JQuery Datatable in Spring MVC with Example

JQuery Datatable Options

Methods in jQuery Datatable

How to use Jquery datatable in Spring MVC

jQuery Datatable

How to use jQuery datatable in Spring MVC application

Related Tutorial: Advance Features of JQuery Datatable with Example in Spring MVC

August 2018
M	T	W	T	F	S	S
« Jun
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31