java jquery_jQuery数据表和Java集成

java jquery

jQuery DataTables是一个开放源代码插件，用于在浏览器中创建表。
它具有许多功能，例如排序，服务器端处理， JQUERY UI主题滚动。
该插件的下载链接：
http://www.datatables.net/download/
在本演示中，我们展示了数据表与Java的集成。数据表将通过调用Ajax来加载所有数据来加载数据。
响应数据必须包含“ aaData”属性。
该演示的主要组件是：
项目结构：

与Java集成：
静态数据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;}
}

数据表对象将作为响应传递到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;}}

返回JSON作为String StudentDataServlet.java的Servlet ，

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);}}

带有表元素文件ajaxDataTable.jsp的html文件，

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

用于初始化数据表my-demo-table-script.js的 Java脚本代码，
```
$(document).ready(function() {$('.jqueryDataTable').dataTable( {'bProcessing': false,'bServerSide': false,'sAjaxSource': './StudentDataServlet','bJQueryUI': true,'aoColumns': [{ 'mData': 'name' },{ 'mData': 'mark' }]} ); 
} );
```
输出：

集成表的输出将是：

视频：

下载演示代码：
演示代码下载链接

参考： My Small Tutorials博客上的JCG合作伙伴 Sandeep Kumar Patel提供的JQuery DataTables和Java Integration 。

翻译自: https://www.javacodegeeks.com/2013/02/jquery-datatables-and-java-integration.html
java jquery