文档章节

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

烤猪佩奇
 烤猪佩奇
发布于 2016/02/29 17:21
字数 633
阅读 60
收藏 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-初识jQuery

课前须知: 学习jQuery前必须先掌握JavaScript jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握) jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQu...

极客江南
04/20
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

没有更多内容

加载失败,请刷新页面

加载更多

Kali Linux Docker 練習

docker pull kalilinux/kali-linux-docker docker run -t -i kalilinux/kali-linux-docker /bin/bash apt-get update apt-get install htop apt-get install nmap apt-get install wpscan ap......

BaiyuanLab
今天
1
0
通俗大白话来理解TCP协议的三次握手和四次分手

最近在恶补计算机网络方面的知识,之前对于TCP的三次握手和四次分手也是模模糊糊,对于其中的细节更是浑然不知,最近看了很多这方面的知识,也在系统的学习计算机网络,加深自己的CS功底,就...

onedotdot
今天
2
0
TiDB 在爱奇艺的应用及实践

爱奇艺,中国高品质视频娱乐服务提供者,2010 年 4 月 22 日正式上线,推崇品质、青春、时尚的品牌内涵如今已深入人心,网罗了全球广大的年轻用户群体,积极推动产品、技术、内容、营销等全方...

TiDB
今天
1
0
Web系统大规模并发:电商秒杀与抢购

一、大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战。如果Web系统不做针对性的优化,会轻而易举地陷入到异常...

xtof
今天
3
0
代码质量管理平台-sonarqube

在工作中,往往开发的时候会不怎么注重代码质量的人很多,存在着很多的漏洞和隐患等问题,sonarqube可以进行代码质量的审核,而且十分的残酷。。。。。接下来我们说下怎么安装 进入官网下载:...

落叶清风
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部