How to use Jquery datatable in Spring MVC
Creating a table data along with features like pagination, filtering the records, sorting, no of records to show etc. is a challenger job for developers because it involves lot of designs and coding. But now it becomes very easy to develop with the help of jQuery datatable plugin. In this post we will show how to use jQuery datatable in Spring MVC 4 application.
Required Software to Run Example:
- Java 7
- Netbeans
- Maven
- MySQL
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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.rolandopalermo.web</groupId>
<artifactId>spring-datatable</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>spring-datatable</name>
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
<!-- Spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>4.3.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.5.RELEASE</version>
</dependency>
<!-- Jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.7.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<compilerArguments>
<endorseddirs>${endorsed.dir}</endorseddirs>
</compilerArguments>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<phase>validate</phase>
<goals>
<goal>copy</goal>
</goals>
<configuration>
<outputDirectory>${endorsed.dir}</outputDirectory>
<silent>true</silent>
<artifactItems>
<artifactItem>
<groupId>javax</groupId>
<artifactId>javaee-endorsed-api</artifactId>
<version>7.0</version>
<type>jar</type>
</artifactItem>
</artifactItems>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
POJO Class used in Examplepackage com.rolandopalermo.domain;
import com.rolandopalermo.util.EmployeeStatus;
import com.rolandopalermo.util.JsonConverter;
import java.io.Serializable;
/**
*
* @author rolan
*/
public class Employee implements Serializable {
private int id;
private String name;
private String surname;
private int age;
private String address;
private EmployeeStatus status;
public Employee(int id, String name, String surname, int age, String address, EmployeeStatus status) {
this.id = id;
this.name = name;
this.surname = surname;
this.age = age;
this.address = address;
this.status = status;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSurname() {
return surname;
}
public void setSurname(String surname) {
this.surname = surname;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public EmployeeStatus getStatus() {
return status;
}
public void setStatus(EmployeeStatus status) {
this.status = status;
}
@Override
public String toString() {
String json = JsonConverter.INSTANCE.asJsonString(this);
return json;
}
}
Spring MVC Controllerpackage com.rolandopalermo.controller;
import com.rolandopalermo.domain.Employee;
import com.rolandopalermo.test.DummyDAO;
import com.rolandopalermo.util.ResponseList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
/**
*
* @author rolan
*/
@Controller
public class HomeController {
@RequestMapping(value = {"/", "/home"}, method = RequestMethod.GET)
public ModelAndView home() {
ModelAndView model = new ModelAndView();
model.setViewName("home");
return model;
}
@RequestMapping(value = {"/get-all-employees"}, method = RequestMethod.POST)
@CrossOrigin(origins = "*", allowCredentials = "true")
@ResponseBody
public String getAllEmployees(HttpServletRequest request, HttpServletResponse response) {
String json;
try {
ResponseList<Employee> lstInvoices = DummyDAO.getAllEmployees();
json = lstInvoices.toString();
} catch (Exception e) {
json = "{"error" : true, "message": "" + e.getMessage() + "."}";
}
return json;
}
}
Javascript$(document).ready(function () {
$.ajax({
method: "POST",
url: 'get-all-employees',
dataType: 'json',
crossDomain: true,
beforeSend: function (xhr) {
//Set authentication headers
},
success: function (data, textStatus, jqXHR) {
if (data.error) {
alert(data.message);
} else {
var selector = $("#applications");
selector.html("");
selector.append(JSON.stringify(data));
data = $.parseJSON(selector.text());
console.log(data);
table = $("#employees").DataTable({
data: data,
scrollX: true,
scrollCollapse: true,
fixedColumns: true,
columns: [{
data: "id",
visible: false
}, {
data: "name"
}, {
data: "surname"
}, {
data: "age"
}, {
data: "address"
}, {
data: "status",
render: function (value) {
switch (value) {
case "ACTIVE":
return '<span class=active></span>';
case "PENDING":
return '<span class=pending></span>';
case "INACTIVE":
return '<span class=inactive></span>';
case "DELETED":
return '<span class=deleted></span>';
default:
return '<span class=active></span>';
}
}
}
]
});
}
},
error: function (xhr) { // if error occured
alert('No se pudo procesar la solicitud.');
},
complete: function () {
},
xhrFields: {
withCredentials: true
}
});
});
WebAppInitializer<%--
Document : view
Created on : Jan 20, 2017, 7:15:31 PM
Author : Rolando
--%>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="<c:url value='/static/app/third-party/js/jquery-1.12.4.js' />"></script>
<script type="text/javascript" src="<c:url value='/static/app/third-party/datatables/js/jquery.dataTables.min.js' />"></script>
<script type="text/javascript" src="<c:url value='/static/app/third-party/datatables/js/dataTables.buttons.min.js' />"></script>
<script type="text/javascript" src="<c:url value='/static/app/js/home.js' />"></script>
<link href="<c:url value='/static/app/third-party/datatables/css/jquery.dataTables.min.css'/>" rel="stylesheet"/>
<link href="<c:url value='/static/app/third-party/datatables/css/buttons.dataTables.min.css'/>" rel="stylesheet"/>
<link href="<c:url value='/static/app/css/master.css'/>" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>How to use Jquery datatable in Spring MVC</title>
</head>
<body>
<div id="applications" style="display: none"></div>
<table id="employees" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Address</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
And your output should looks like:
Download the full source code from Github and enjoy it! https://github.com/rolandopalermo/spring-datatable
Comentarios
Publicar un comentario