文档章节

Jquery的DataTable插件 AJAX 服务器分页的的学习心得(java版)

烤猪佩奇
 烤猪佩奇
发布于 2016/02/29 17:21
字数 633
阅读 55
收藏 0
点赞 1
评论 0

首先得先引入对应的js

1、jquery.min.js  首先导入

2、 File:        jquery.dataTables.min.js
        Version:     1.9.4     这是我使用的版本


这是  jsp 页面

关键的table  代码

<table id="fuck" class="table table-bordered data-table">
									<thead>
									<tr>
									
            						<span style="white-space:pre">		</span>  <th>姓名</th>
         						  <span style="white-space:pre">		</span>  <th>账号</th>
              						 <span style="white-space:pre">		</span>  <th>登录时间</th>
            						<span style="white-space:pre">		</span></tr>
									</thead>
									<tbody>
									
									</tbody>
									</table>

必须保证  thead    tbody 存在


接着是  对 这个table  自己写的 js 文件   

这里我贴出关键代码

$("#fuck").dataTable({
			"oLanguage" : { // 汉化
				"sProcessing" : "正在加载数据...",
				"sLengthMenu" : "显示_MENU_条 ",
				"sZeroRecords" : "没有您要搜索的内容",
				"sInfo" : "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
				"sInfoEmpty" : "记录数为0",
				"sInfoFiltered" : "(全部记录数 _MAX_  条)",
				"sInfoPostFix" : "",
				"sSearch" : "搜索",
				"sUrl" : "",
				"oPaginate" : {
					"sFirst" : "第一页",
					"sPrevious" : " 上一页 ",
					"sNext" : " 下一页 ",
					"sLast" : " 最后一页 "
				}
			},
			"bJQueryUI": true,
			"bPaginate" : true,// 分页按钮
			"bFilter" : true,// 搜索栏
			"bLengthChange" : true,// 每行显示记录数
			"iDisplayLength" : 10,// 每页显示行数
			"bSort" : false,// 排序
			//"aLengthMenu": [[50,100,500,1000,10000], [50,100,500,1000,10000]],//定义每页显示数据数量
			//"iScrollLoadGap":400,//用于指定当DataTable设置为滚动时,最多可以一屏显示多少条数据
			//"aaSorting": [[4, "desc"]],
			"bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
			"bWidth":true,
			//"sScrollY": "62%",
            //"sScrollX": "210%",
            "bScrollCollapse": true,
			"sPaginationType" : "full_numbers", // 分页,一共两种样式 另一种为two_button // 是datatables默认
			"bProcessing" : true,
			"bServerSide" : true,
			"bDestroy": true,
			"bSortCellsTop": true,	
	        "sAjaxSource": '/getInfo.action', 
	        "aoColumns":
	           [  
			{ "mData": "id", 'sClass':'left'},
	        	{ "mData": "name", 'sClass':'center'}, 
	        	{ "mData": "account",'sClass':'left'},
	        	{ "mData": "logintime", 'sClass':'left'}
	            	/*
	            	{ "mData": "password",'sClass':'left',"mRender":function(data,type,full){
	            		return "<button type='button' onclick=fuck11("+data+")>"+data+"</button>"
	            		}
	            	}
	            	*/
	            ],
	        "fnServerData" : function(sSource, aoData, fnCallback) {
				$.ajax({
					"type" : 'post',
					"url" : sSource,
					"dataType" : "json",
					"data" : {
						aoData : JSON.stringify(aoData)
					},
					"success" : function(resp) {
						fnCallback(resp);
					}
				});
	
			}
			 
		});
经过以上配置以后   服务器端接收的到的字符串可以转换成JSONArray      然后在服务器端获取关键的参数来分页

这是struts2的关键代码

public String list() {
		String sEcho = "";// 记录操作的次数  每次加1
		String iDisplayStart = "";// 起始
		String iDisplayLength = "";// size
		String sSearch = "";// 搜索的关键字
		int count = 0 ;  //查询出来的数量
		JSONArray ja = (JSONArray) JSONArray.parse(aoData);
		//分别为关键的参数赋值
		for (int i = 0; i < ja.size(); i++) {
			JSONObject obj = (JSONObject) ja.get(i);
			if (obj.get("name").equals("sEcho"))
				sEcho = obj.get("value").toString();
			if (obj.get("name").equals("iDisplayStart"))
				iDisplayStart = obj.get("value").toString();
			if (obj.get("name").equals("iDisplayLength"))
				iDisplayLength = obj.get("value").toString();
			if (obj.get("name").equals("sSearch"))
				sSearch = obj.get("value").toString();
		}
		
		//为操作次数加1
		int  initEcho = Integer.parseInt(sEcho)+1;
		count = managerService.findManagerToPageCount(Integer
				.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch);
		List<Manager> managers = managerService.findManagerToPage(Integer
				.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch);
		dataMap.put("iTotalRecords", count);
		dataMap.put("sEcho",initEcho);
		dataMap.put("iTotalDisplayRecords", count);
		dataMap.put("aaData", managers);
		return SUCCESS;
	}


然后记得  返回的 json船一定要符合格式  不然table是无法显示的


本文转载自:http://blog.csdn.net/cjaver/article/details/38143151

共有 人打赏支持
烤猪佩奇
粉丝 18
博文 46
码字总数 6583
作品 0
广州
高级程序员
JQuery 和 Extjs 比较

JQuery 和 Extjs 比较 一、JQuery 和 Extjs 比较 JQuery-EasyUI是仿照Ext做的。 Ext框架是一个整体,面向对象的编程思想,每个控件之间可以相互通讯。JQuery的控件全都是分散的,没有整体性可...

Amamatthew
2014/09/11
0
0
jQuery Validation Engine 表单验证

<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.validationEngine-en.js" type="text/javascript"></script><script src="js/jquery.validationEngine......

MLeo
2013/01/18
0
0
jquery教程靠边站,一分钱不花让你免费学会jquery

jquery,一个很优秀很好用的javascript框架,"write less,do more”的思想给开发人员带来前所未有的冲击,好比java的思想"write once , run anywhere”,无疑,他们都是很受欢迎,也是很成功的....

tojsp_com
2010/08/18
0
2
jquery mobile开发笔记之Ajax提交数据

这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容。可能之前有过web的开发基础,相对于我来说学习这个东西感觉挺简单的,很容易上手。Jqm的的语法和jquery其实是一样的,有些不大...

xiahuawuyu
2012/10/06
0
1
jquery的ajax和getJson跨域获取json数据

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因...

度外网络
2012/09/26
0
1
PHP判断一个请求是Ajax请求还是普通请求

Javascript中大多数的框架如 jquery(jquery ui、jquery easyui)、Mootools 等,在发出 Ajax 请求时,都会发送额外的 HTTPXREQUESTED_WITH 头部信息,因此每当发送一个ajax请求你就可以在服务...

Junn
2013/08/05
0
1
Java 代码生成器 - InfinityJEEEU

无垠式 Java 代码生成器 JEEEU 版 项目介绍 这是最轻量级的代码生成器,生成物大概占用7.5M数据大小。 采用Servlet,JSP, JSON, Easy UI等简单技术实现,是标准的Model2的MVC设计模式的架构。...

火箭船
05/28
0
0
用Java(JUnit4)对JavaScript(含Ajax)脚本进行单元测试

一、背景 因为原来采用过Rhino(JS解析引擎,新版JDK中也默认包含另外一个解析引擎)来在Java环境中解析JavaScript并运行其中的方法。最近看到有人在问题里提问,模拟Ajax请求的问题。所以就...

NoahX
2013/04/09
0
3
慕课分享:盘点2014年热门免费开发课程

这篇文章来自慕课网团队的分享,文章从前端开发、后端开发、移动开发和OS 四个方面,分享了2014年度的热门免费课程。 前端开发 《HTML+CSS基础课程》 这门课程从最基本的概念开始讲起,步步深...

2014/12/30
0
0
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

rabbitmq学习记录(三)

工作队列:一个生产者,多个消费者,生产者直接将消息发送到rabbitmq的队列之中 默认采用的是轮询分配:即不管消费者处理信息的效率,队列给所有消费者轮流发送一条信息,直至消息发送完毕 ...

人觉非常君
19分钟前
0
0
Java 之 反射

反射,剖析 Java类 中的 各个组成部分,映射成 一个个 Java对象,多用于 框架和组件,写出复用性高的通用程序。 测试类代码如下: class Person { private String name; public St...

绝世武神
23分钟前
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
29分钟前
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
31分钟前
0
0
003. es6数值的扩展

一、普通扩展 Number 方法,将字符串、数值转为十进制 : Number('0b111') Number.isFinite() 用来检查一个数值是否为有限的:Number.isFinite(15) Number.isNan() 用来检查一个值是否为NaN N...

秋季长青
45分钟前
0
0
C语言数组和指针的语法糖

对于C语言,我可以这样秀:比如当创建一个数组arr[n]之后,一般我们去遍历数组的时候是for (int i = 0; i < n; i++) { a[i]; }但是我知道下表访问符[]是个语法糖,也就是说a[i]在编译器看来是...

ustbgaofan
53分钟前
0
0
Call to undefined function bcmath()的解决方法

乐意黎的ECS主机环境,Centos7.2 + PHP7 由于使用了bcdiv()函数,运行时总在抛错。 Fatal error: Call to undefined function bcmath() in /usr/loca/apache/htdocs/... on line 4 一查得知:......

dragon_tech
59分钟前
0
0
css优先级

..

architect刘源源
今天
0
0
【转】Twitter的分布式自增ID算法snowflake

结构 snowflake的结构如下(每部分用-分开): 0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 000000000000 第一位为未使用,接下来的41位为毫秒级时间(41位的长度可以...

talen
今天
0
0
hive支持行级修改

Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置。要想支持行级insert、update、delete,需要配置Hive支持事务。 一、Hive具有ACID语义事务的使用场景 1. 流式...

hblt-j
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部