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.

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

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.

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.

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>

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>

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

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

If you have any queries in this jQuery datatable in Spring MVC application 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.