如何使用JSON和Servlet创建JQuery DataTable

在本文中,我将介绍使用简单servlet传递的JSON创建JQuery DataTable所需的基本编码。 DataTable是基于JQuery的非常强大的网格,具有高级功能,可以使用自定义功能在短时间内构建。

安装

  1. 下载最新的JQuery DataTable下载
  2. 上面的下载将提供两个JQuery插件jquery.js和queryTables.js
    <script type="text/javascript"
    charset="utf-8" src="/DataTables/media/js/jquery.js"></script>
    <script type="text/javascript"
    charset="utf-8" src="/DataTables/media/js/jquery.dataTables.js"></script>
  3. 最新的DataTable下载包随附的默认样式表
    <style type="text/css" title="currentStyle">@import "../resources/css/demo_table.css";
    </style>

注意: 您可以从Github链接下载完整的源代码

创建数据表

我们可以编写以下代码来创建具有数据的基本DataTable

feedSummary.jsp

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#tableId').dataTable( {
"processing": true,
"ajax": {
"url": "/FeedSummaryUpdate/FeedServlet",
"dataSrc": "demo",
"type": "GET"
}
} );
} );
</script>

$(document).ready将准备执行javascript,并且var oTable = $('#tableId')。dataTable表示已将DataTable写入tableId位置。

默认情况下,DataTables将为您的表添加排序,过滤,分页和信息,使网站的最终用户能够控制表的显示并尽快从表中查找所需的信息。

指针tableId和列名将在table标记中定义,如下所示

feedSummary.jsp

<table cellpadding="0" cellspacing="0" border="0"
id="tableId">
<thead>
<tr>
<th width="10%">First Name</th>
<th width="10%">Last Name</th>
<th width="10%">Address 1</th>
<th width="10%">Address 2</th>
</tr>
</thead>
</table>

上面的DataTable代码调用FeedServlet,它将返回如下定义的JSON字符串

FeedServlet.java

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String json = "{ \"demo\":[[\"First Name\",\"Last Name\","+
+\"Address1\",\"Address2\"],[\"First Name\",\"Last Name\",\"Address1\",\"Address2\"]]}";
out.println(json);
}

现在我们可以使用servlet批注或以下web.xml在FeedServlet上方进行注册

Web.xml

<servlet>
<description></description>
<display-name>FeedServlet</display-name>
<servlet-name>FeedServlet</servlet-name>
<servlet-class>FeedServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FeedServlet</servlet-name>
<url-pattern>/FeedServlet</url-pattern>
</servlet-mapping>

跑步

结合以上几点并与服务器一起部署以查看结果,如下所示: http:// localhost:8080 / ExampleDataTableJSON / feedSummary.jsp

jQuery DataTable图片

jQuery的数据表

结论

您可以从Github链接下载完整的源代码,最欢迎进行分叉或更新。

资源:

  • http://datatables.net/examples/

参考:在Tech My Talk博客上, 如何从我们的JCG合作伙伴 Nitin Kumar 使用JSON和servlet创建JQuery DataTable 。

翻译自: https://www.javacodegeeks.com/2013/09/how-to-create-jquery-datatable-using-json-and-servlet.html

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

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

相关文章

python将json转换为excel_使用python将Excel转换为JSON_python_酷徒编程知识库

我有一个excel文件&#xff0c;我想转换为JSON文件&#xff0c;excel类似于&#xff1a;Col A Col C Col F1 A EE2 B FF4 C FF5 D HH6 D HH7 A EE8 E EE希望JSON遵循以下格式&#xff1a;{"EE": {"A": {"Col A key":"1","Col A k…

页面重绘 回流及其优化

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解&#xff0c;页面是怎么把html结合css等显示到浏览器上的&#xff0c; 下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1. 浏览器把获取到的HTML代码解析成1…

Servlet异常和错误处理示例教程

有时我写了一篇有关Java异常处理的文章&#xff0c;但是当涉及到Web应用程序时&#xff0c;我们需要的不仅仅是Java中的异常处理。 Servlet异常 如果您注意到&#xff0c;doGet&#xff08;&#xff09;和doPost&#xff08;&#xff09;方法将抛出ServletException和IOExcept…

前端介绍开始(—)

web 的组成浏览器服务器&#xff1a;代替用户向服务器发送请求通信协议&#xff1a;规范数据传输及打包方式&#xff08;http,https&#xff09; 服务器&#xff1a;1 作用&#xff1a;1 接收用户请求并响应 2 存储数据3 具有安全性功能2 产品&#xff1a;1 Tomcat2 Aapache3 N…

python数据结构与算法13_python 数据结构与算法 (13)

python 数据结构与算法 (13)选择排序 (Selection sort) 是? 种简单直观的排序算法. 它的? 作原理如 下.? 先在未排序序列中找到最?(?)元素, 存放到排序序列的起始位 置, 然后, 再从剩余未排序元素中继续寻找最?(?)元素, 然后放到已排 序序列的末尾. 以此类推, 直到所有元…

算法10-----分糖果

1、题目&#xff1a; N个孩子在队伍中&#xff0c;每个孩子都有一定的等级值&#xff0c;相邻两个孩子等级高的拿到的糖果数量要比等级低的多&#xff0c;且每个孩子至少有一个糖果&#xff0c;所以最少队伍一共需多少糖果。 There are N children standing in a line. Each ch…

小程序如何发红包

咳咳&#xff0c;直入主题。敲黑板&#xff0c;请看下面一段对话。 产品&#xff1a;我想要小程序发红包这个功能 程序员&#xff1a;目前不支持啊 产品&#xff1a;我不管&#xff01; 程序员&#xff1a;做不到啊&#xff0c;这。。。 产品&#xff1a;我不管&#xff01;我不…

如何实现REST资源的输入验证

如何实现REST资源的输入验证 我正在使用的SaaS平台具有一个RESTful接口&#xff0c;该接口可以接受XML有效负载。 实施REST资源 对于像我们这样的Java商店&#xff0c;使用JAX-B从XML Schema生成JavaBean类是有意义的。 在像Jersey的JAX-RS环境中&#xff0c;使用JAX-B处理X…

Linux系统下,MySQL以及禅道的安装/卸载

1、MySQL卸载&#xff1a; &#xff08;通过yum命令卸载之前安装的mysql&#xff0c; find命令找到mysql文件&#xff0c;再用rm –rf 强制删除/var/lib/mysql&#xff09; 2、MySQL安装&#xff1a; &#xff08;使用yum命令安装mysql&#xff0c;安装完成后启动数据库&#x…

python类对象点处折行_史上最全的Python面向对象知识点疏理(对象是类的实例)

(对象是类的实例)面向对象技术简介类:用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。class类变量&#xff1a;类变量在整个实例化的对象中是公用的。类变量定义在类中且在函数体之外。类变量通常不作为实例变量使用…

winform 点击全选

代码如下&#xff1a; #region 全选//chkAll_Checked即全选控键的点击事件private void chkAll_CheckedChanged(object sender, EventArgs e){if (chkAll.Checked){chkSun.Checked true;chkMon.Checked true;chkThu.Checked true;chkTue.Checked true;chkWed.Checked true…

今天的考核题目: 你知道React和Vue的区别吗? skr,skr

React 和 Vue 的区别 博主面了几家公司&#xff0c;看简历上写着使用Vue.js框架&#xff0c;就会问&#xff0c;你能说一说 vue 和 react的区别吗 &#xff1f;react 听过&#xff0c;没用过&#xff0c;所以就只能尴尬的说不怎么了解react。这不&#xff0c;最近刚学了react …

Play和Grails Java框架的优缺点

框架通过为程序员提供一些有用的功能来简化应用程序开发过程。 由于开发人员的普遍使用&#xff0c;Java框架经常被开发人员使用。 您可以在市场上找到各种Java开发框架。 新手开发人员经常在论坛上发布一个常见问题&#xff1a;“哪种Java框架是最好的&#xff1f;” 首先&am…

C++小项目-吃豆子游戏

GMap.h #pragma once //保证头文件只被编译一次#include "stdafx.h"#define MAP_LEN 19 //逻辑地图大小 (逻辑地图由行、列各为19的方块组成)#define P_ROW 10 //大嘴出生地的横逻辑坐标 #define P_COLUMN 9 //大嘴出生地的列逻辑坐标 #define E_ROW 8 //敌人出…

argb888与rgb888转换程序_一文了解各平台RGB565和RGB888区别

原标题&#xff1a;一文了解各平台RGB565和RGB888区别用过AM335x平台的小伙伴应该知道&#xff0c;OK335xS开发平台的LCD接口是RGB888模式的&#xff0c;而OK335xD开发平台的LCD接口是RGB565模式的。如果把xS的镜像烧写到xD平台上&#xff0c;那么LCD会显示颜色异常。这是为什么…

d4d#9 玩Docker只要浏览器就够了,PWD是个神奇的网站

本文是d4d系列的第9篇&#xff0c;在这一篇中给大家介绍一个学习Docker最为快捷高效的方式&#xff0c;你不需要自己搭建环境&#xff0c;也不用担心把自己的开发环境搞乱&#xff0c;你需要的只是一个浏览器&#xff0c;就可以立即开始学习Docker的常用命令&#xff1b;你甚至…

基于 Docker 打造前端持续集成开发环境

知乎: https://zhuanlan.zhihu.com/p/37961402本文将以一个标准的 Vue 项目为例&#xff0c;完全抛弃传统的前端项目开发部署方式&#xff0c;基于 Docker 容器技术打造一个精简的前端持续集成的开发环境。 前置知识&#xff1a;1. CI&#xff08;持续集成&#xff09;&#xf…

哪个内存更快?Heap或ByteBuffer或Direct?

Java正在成为新的C / C &#xff0c;它被广泛用于开发高性能系统。 对像我这样的数百万Java开发人员来说非常好&#xff01; 在这个博客中&#xff0c;我将分享我可以用Java完成的不同类型的内存分配实验以及您从中获得的好处。 Java中的内存分配 Java提供哪种类型的内存分配…

java没有打印mysql日志_0216 aop和打印数据库执行日志

需求maven依赖p6spyp6spy3.8.7com.google.guavaguava28.2-jreorg.springframework.bootspring-boot-starter-data-jpaorg.springframework.bootspring-boot-starter-webmysqlmysql-connector-javaruntimeorg.projectlomboklomboktrue打印sql配置要点&#xff1a;驱动配置 appli…

php数组基础

php中&#xff0c;数组的下标可以是整数&#xff0c;或字符串。 php中&#xff0c;数组的元素顺序不是由下标决定&#xff0c;而是由其“加入”的顺序决定。 定义&#xff1a; $arr1 array(元素1&#xff0c;元素2&#xff0c;。。。。。 ); array(1, 5, 1.1, “abc”, tr…