jQuery数据表和Java集成
- 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
jQuery数据表和Java集成相关推荐
- java jquery_jQuery数据表和Java集成
java jquery jQuery DataTables是一个开放源代码插件,用于在浏览器中创建表. 它具有许多功能,例如排序,服务器端处理, JQUERY UI主题滚动. 该插件的下载链接: ht ...
- 13-MySQL面向对象设计:数据表与Java对象对应关系
1.类(对象)在数据库中的体现 对应关系 类定义― ― ―>表定义 类属性― ― ―>表字段(列) 类关系― ― ―>表关系 对 象― ― ―>表记录(行) 备注 Oid(对象 ...
- ajax表格内容加按钮,单击按钮时,如何触发jquery数据表fnServerData通过AJAX更新表?...
我正在将datatables插件与服务器端数据一起使用,并使用AJAX更新表. 我的dataTables设置如下所示: tblOrders = parameters.table.dataTable( ...
- eclipse给mysql修改表数据_Eclipse中java向数据库中添加数据,更新数据,删除数据...
ASP.NET网页动态添加.更新或删除数据行 看过此篇 http://www.cnblogs.com/insus/p/3247935.html的网友,也许明白Insus.NET是怎样实现动态添加数据行 ...
- java查询mysql装载bean_jsp与javabean链接mysql数据库并查询数据表的简单实例源码
jsp与javabean链接mysql数据库并查询数据表的简单实例源码.这个简单的实例是给新手学习的,或者一些高手临时忘记怎么使用jsp操作mysql数据库时候查找的,包括了建立mysql数据库连接的 ...
- mysql数据库访问300ms以上_[Java教程]一张900w的数据表,16s执行的SQL优化到300ms?...
[Java教程]一张900w的数据表,16s执行的SQL优化到300ms? 0 2020-11-20 16:00:16 一,前言 证实 有一张财务流水表,未分库分表,目前的数据量为9555695,分页 ...
- java 数据对_数据表与简单java类(一对多)
emp表:empno,ename,job,sal,comm,mgr,deptno dept表:deptno,dname,loc 要求可以通过程序描述出如下对应关系 一个部门有多个部员,并且可以输出一个 ...
- java引用其他类的数据头文件_Java 实现数据表与简单Java类映射转换
我们在程序开发过程中往往会使用简单Java类进行数据表结构的描述,本文主要介绍如何简单Java类与数据表之间的转换. 首先,先简单介绍一下数据表与简单Java类的相关概念对比: 表的定义 → 实体表设 ...
- 大数据之mongodb -- (2)java集成 MongoDB 3.2,使用Spring-data-mongodb进行集成
Java集成MongoDB有很多方式,可以直接用mongodb的java驱动程序来发送语句到mongodb服务器,也可以用第三方的工具包来做. (1) 选择版本 选择的就是springdata集成的m ...
最新文章
- dom4j ---最好的xml解决方案?
- SecureCRT使用本地公钥 SSH 免密码登录Linux
- react.js app_如何创建Next.js入门程序以轻松引导新的React App
- css小技巧: select的css控制
- 外贸业务员会计算机知识,外贸业务员、电子商务
- 2018-2019-1 20189221 《构建之法》第 3 周学习总结
- 不加群提取群成员_QQ群引流推广怎么做
- python 自动划分训练集和测试集
- 操作系统COM组件的概念
- SCI论文写作的时态用法
- 李宏毅2020机器学习深度学习(完整版)国语课程PPT
- 用C/C++手撕CPlus语言的集成开发环境(1)—— 语言规范 + 词法分析器
- 迷宫小游戏Java实现
- ubuntu14.04 64位安装H3C iNode客户端
- 干货!基于非递减分位数网络的值分布强化学习及其高效探索方法
- Matlab新老版本的差别问题——CAGD课程设计
- 微软亚洲研究院的“三好”实习生
- 探讨计量经济学与机器学习
- SEO和竞价有什么区别?
- EasyUi之Dialog(对话框窗口)
热门文章
- 命令行执行Junit测试
- hazelcast 使用_使用HazelCast进行Hibernate缓存:JPA缓存基础知识
- 使用Jenkins,GitHub和Docker的最先进的持续集成和部署管道
- webapp文本编辑器_Project Student:维护Webapp(可编辑)
- jdbc和jdbc驱动_JDBC布尔兼容性列表
- 在JDK 12精简数字格式中使用最小分数数字
- 具有JDK 12精简数字格式的自定义精简数字模式
- q7goodies事例_Java 8 Friday Goodies:Lambda和XML
- tms tck_两个用于Eclipse的TCK –开源到底有什么?
- 使用Spring Boot构建REST Web服务