郑州网站及优化,开发公司解除前期物业服务合同,统计后台网站有哪些,wordpress分类图标列表java jqueryjQuery DataTables是一个开放源代码插件#xff0c;用于在浏览器中创建表。 它具有许多功能#xff0c;例如排序#xff0c;服务器端处理#xff0c; JQUERY UI主题滚动。 该插件的下载链接#xff1a; http://www.datatables.net/download/ 在本演示中用于在浏览器中创建表。 它具有许多功能例如排序服务器端处理 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 Liststudent getStudentList() {Liststudent listOfStudent new ArrayListstudent();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;Liststudent 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 Liststudent getAaData() {return aaData;}public void setAaData(Liststudent 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();ListStudent 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 languagejava contentTypetext/html; charsetISO-8859-1pageEncodingISO-8859-1%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
html
head
meta http-equivContent-Type contenttext/html; charsetISO-8859-1
titleAjax Data Response And JQuery data table/titlestyle typetext/css titlecurrentStyleimport ./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 /headbodydiv classtable-containertable cellpadding0 cellspacing0 border0 classdisplay jqueryDataTabletheadtrthName/ththMark/th/tr/theadtbody/tbody/table/divscript src./resource/js/jquery-1.8.3.min.js/scriptscript src./resource/js/jquery.dataTables.min.js/scriptscript srchttp://code.jquery.com/ui/1.9.2/jquery-ui.js/scriptscript 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.htmljava jquery
