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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369544.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS 属性 - 伪类和伪元素的区别

伪元素和伪类之所以这么容易混淆&#xff0c;是因为他们的效果类似而且写法相仿&#xff0c;但实际上 css3 为了区分两者&#xff0c;已经明确规定了伪类用一个冒号来表示&#xff0c;而伪元素则用两个冒号来表示。 :Pseudo-classes ::Pseudo-elements 但因为兼容性的问题&…

class-感知机Perception

1 感知机模型1.1 模型定义2 感知机学习策略2.1 数据的线性可分性2.2 学习策略3 学习算法3.1 算法原始形式3.2 收敛性3 学习算法的对偶形式1 感知机模型 感知机perceptron是二类分类问题的线性分类模型&#xff0c;输入为实例的特征向量&#xff0c;输出为实例的类别&#xff08…

Java中的方法调用有多昂贵

我们都去过那儿。 在查看设计不良的代码的同时&#xff0c;听听作者对人们永远不应该牺牲性能而不是设计的解释。 而且&#xff0c;您不能说服作者摆脱其500行方法&#xff0c;因为链接方法调用会破坏性能。 好吧&#xff0c;这可能在1996年左右是正确的。 但是自那时以来&…

1.HTML

HTML简介 hyper text markup language 即超文本标记语言。 超文本: 就是指页面内可以包含图片、链接&#xff0c;甚至音乐、程序等非文字元素。 标准模板 <!DOCTYPE html> <html lang"en"><head> <meta charset"U…

php记住表单数据cookie,【PHP基础】cookies和session

1.Cookiescookie 常用于识别用户。cookie 是服务器留在用户计算机中的小文件。每当相同的计算机通过浏览器请求页面时&#xff0c;它同时会发送 cookie。通过 PHP&#xff0c;您能够创建并取回 cookie 的值。1.1、如何创建 cookie&#xff1f;setcookie() 函数用于设置 cookie。…

C#调用Power Shell 管理Office365 执行脚本时遇到的问题

Power Shell管理Office参考http://www.mamicode.com/info-detail-494553.html C#调用Power Shell 参考 https://www.cnblogs.com/chenkai/archive/2010/11/09/1872471.html string pwd "**********";string userName "**********";StringBuilder ss new…

javaweb(三十七)——获得MySQL数据库自动生成的主键

测试脚本如下&#xff1a; 1 create table test1 2 ( 3 id int primary key auto_increment, 4 name varchar(20) 5 ); 测试代码&#xff1a; 1 package me.gacl.demo;2 3 import java.sql.Connection; 4 import java.sql.PreparedStatement; 5 import java.sql.ResultSet; …

基于Matlab的模拟通信实验平台设计,【通信原理仿真实验】通信原理虚拟实验仿真平台的设计和实现_玛雅作文网...

作文「通信原理虚拟实验仿真平台的设计和实现」共有 4564 个字&#xff0c;其中有 2704 个汉字&#xff0c;1316 个英文&#xff0c;162 个数字&#xff0c;382 个标点符号。作者佚名&#xff0c;请您欣赏。玛雅作文网荟萃众多优秀学生作文&#xff0c;如果想要浏览更多相关作文…

2018/3/1 省选模拟考试 50分

T1 30分模拟暴力&#xff0c;40分树的直径。拿了0分。&#xff08;空间开小了爆了&#xff0c;因为缩点之后是又建了一次图&#xff0c;两个边的编号tot没分开&#xff0c;mdzz&#xff09; 只写了后40分&#xff0c;而这40分中有20分不需要边双连通分量。写了一个类似于强连通…

骆驼和春天的Drools决策表

正如我在之前的文章中所展示的那样&#xff0c; JBoss Drools是一个非常有用的规则引擎 。 唯一的问题是&#xff0c;对于非技术人员而言&#xff0c;以Rule语言创建规则可能会非常复杂。 这就是为什么可以提供一种轻松的方式来创建业务规则的方法-在电子表格中创建决策表&…

酷炫,用Html5/CSS实现文字阴影

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现。她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就先来看看这个文本阴影. 一.文字阴影text-shadow 文…

从xtrabackup备份恢复单表【转】

目前对MySQL比较流行的备份方式有两种&#xff0c;一种上是使用自带的mysqldump&#xff0c;另一种是xtrabackup&#xff0c;对于数据时大的环境&#xff0c;普遍使用了xtrabackupbinlog进行全量或者增量备份&#xff0c;那么如何快速的从xtrabackup备份中恢复单张表呢&#xf…

CSS中的overflow属性

overflow属性 如果元素中的内容超出了给定的宽度和高度属性&#xff0c;overflow 属性可以确定是否显示滚动条&#xff0c;是否隐藏溢出部分等行为&#xff0c;规定当内容溢出元素框时发生的事情。 可能的值有&#xff1a; visible&#xff1a;默认值。内容不会被修剪&#xff…

【知识梳理1】Android触摸事件机制

前言 随着科学技术的发展&#xff0c;智能手机早已成为我们当代人身边不可缺少的“伙伴”之中的一个&#xff0c;堪比对象女友。每天我们对着手机反复的做着点击、滑动操作&#xff0c;而手机则随着我们的操作给我们展示她的精彩。… 废话到此结束。 看到这里&#xff0c;即使…

自己做的一个登录页面,纯代码!

先上效果图吧. 本人菜鸟入门, 请勿喷. 首先样式: 1 1 body{2 2 margin: 0;3 3 padding: 0;4 4 width: 100%;5 5 height: 100%;6 6 }7 7 8 8 .headers{9 9 width: 100%;10 10 height: 100px;11 11 }12 12 .siv-ng{13 13 width:…

ASP.NET调用cmd命令提示符拒绝访问解决方案

using System.Diagnostics; public class CmdHelper{private static string CmdPath "C:\Windows\System32\cmd.exe";/// <summary>/// 执行cmd命令/// 多命令请使用批处理命令连接符&#xff1a;/// <![CDATA[/// &:同时执行两个命令/// |:将上一个命…

Some reading, some thinking.

update&#xff1a;感谢助教0 0又学会一招&#xff0c;play 了一下CSS Part 1 Reading AuthorArticleNoteMadcola《两年波折路&#xff08;考研、工作、考研&#xff09;》"吾志所向&#xff0c;一往无前&#xff1b;愈挫愈奋&#xff0c;再接再励。"辜新星《时刻调…

CSS选择器:伪类(图文详解)

本文最初发表于博客园&#xff0c;并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我&#xff0c;一起入门和进阶前端。 以下是正文。 伪类&#xff08;伪类选择器&#xff09; 伪类&#xff1a;同一个标签&#xff0c;根据其不同的种状态&#xff0c;有不同的样式。…

DIV固定宽度和动态拉伸混合水平排列

1.效果图 2.源代码 html <h2>1.头部固定&#xff0c;尾部拉伸</h2> <div class"container" id"div1"><div class"head"></div><div class"tail"></div> </div><h2>2.尾部固定…

使用CSS设置JavaFX饼图样式

渲染图表时&#xff0c; JavaFX默认提供某些颜色。 但是&#xff0c;在某些情况下&#xff0c;您想自定义这些颜色。 在此博客文章中&#xff0c;我将使用一个示例来更改JavaFX饼图的颜色&#xff0c;该示例打算在今天下午在RMOUG Training Days 2013的演示中包括。一些基于Jav…