- Jquery DataTables is a open source plugin for creating tables in browser.
- It has many features like sorting,server side processing, JQUERY UI theme rolling.
- The download link for this plugin:-
http://www.datatables.net/download/
- In this demo we have shown integration of data table with java.The Data table will load the data by making an Ajax call to load all the data.
- The response data must contain “aaData” properties.
- The main components in this demo are :-
Project Structure:-
Integration With Java :-
- The Static data StudentDataService.java ,
package com.sandeep.data.service;
import java.util.ArrayList;
import java.util.List;
import com.sandeep.data.object.Student;
public class StudentDataService {
public static List<student> getStudentList() {
List<student> listOfStudent = new ArrayList<student>();
Student aStudent = new Student();
for (int i = 1; i <= 200; i++) {
aStudent = new Student();
aStudent.setName("Sandeep" + i);
aStudent.setMark("20" + i);
listOfStudent.add(aStudent);
}
return listOfStudent;
}
}
- Data table object which will go as response in Servlet DataTableObject.java,
package com.sandeep.data.object;
import java.util.List;
public class DataTableObject {
int iTotalRecords;
int iTotalDisplayRecords;
String sEcho;
String sColumns;
List<student> aaData;
public int getiTotalRecords() {
return iTotalRecords;
}
public void setiTotalRecords(int iTotalRecords) {
this.iTotalRecords = iTotalRecords;
}
public int getiTotalDisplayRecords() {
return iTotalDisplayRecords;
}
public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
this.iTotalDisplayRecords = iTotalDisplayRecords;
}
public String getsEcho() {
return sEcho;
}
public void setsEcho(String sEcho) {
this.sEcho = sEcho;
}
public String getsColumns() {
return sColumns;
}
public void setsColumns(String sColumns) {
this.sColumns = sColumns;
}
public List<student> getAaData() {
return aaData;
}
public void setAaData(List<student> aaData) {
this.aaData = aaData;
}
}
- The Servlet which return JSON as String StudentDataServlet.java,
package com.sandeep.json.data.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.sandeep.data.object.DataTableObject;
import com.sandeep.data.object.Student;
import com.sandeep.data.service.StudentDataService;
public class StudentDataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public StudentDataServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
PrintWriter out = response.getWriter();
List<Student> lisOfStudent = StudentDataService.getStudentList();
DataTableObject dataTableObject = new DataTableObject();
dataTableObject.setAaData(lisOfStudent);
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String json = gson.toJson(dataTableObject);
out.print(json);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
- The html file with table element file ajaxDataTable.jsp,
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>Ajax Data Response And JQuery data table</title>
<style type="text/css" title="currentStyle">
@import "./resource/css/demo_table_jui.css";
@import "./resource/css/jquery-ui-1.9.2.custom.min.css";
</style>
<style>
.table-container{
width:800px;
}
tr.odd{
background: #EDE4D4 !important;
}
tr.odd td.sorting_1{
background: #EDE4D4 !important;
}
tr.even td.sorting_1{
background: #fff !important;
}
</style>
</head>
<body>
<div class="table-container">
<table cellpadding="0" cellspacing="0" border="0" class="display jqueryDataTable">
<thead>
<tr>
<th>Name</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="./resource/js/jquery-1.8.3.min.js"></script>
<script src="./resource/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="./resource/js/my-demo-table-script.js"></script>
</body>
</html>
- Java Script code for initializing the data table my-demo-table-script.js,
$(document).ready(function() {
$(".jqueryDataTable").dataTable( {
"bProcessing": false,
"bServerSide": false,
"sAjaxSource": "./StudentDataServlet",
"bJQueryUI": true,
"aoColumns": [
{ "mData": "name" },
{ "mData": "mark" }
] } );
} );
Output:-
The output of integrated table will be,
Video:-
Download Demo Code:-
Sandeep