文档章节

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

不合法昵称
 不合法昵称
发布于 2016/02/29 17:21
字数 633
阅读 64
收藏 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
广州
高级程序员
私信 提问
java或js,ajax或jquery分页代码吗最好就是含有一些高级的算法来分页,

谁有更好的java或js,ajax或jquery分页代码吗最好就是含有一些高级的算法来分页,S2SH框架使用 1 分钟前Thomas8sky | 分类:JAVA相关 | 浏览1次 最近想学会优化代码,学习一些高级的算法,来提...

天池番薯
2014/02/23
323
1
我现在的技术大概可以拿多少薪水,我列出了我会的东西

现在的工作。模拟用户行为。或者是模拟链接,,就像一个盒子扔进去东西,扔出来东西,不知道里面算法。最后可以达到传进去我想传的,和得到我想要的。有两个重要功能我完成了第一个。接下来做...

码农与厨子
2013/04/27
5.5K
41
JQuery 和 Extjs 比较

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

Amamatthew
2014/09/11
0
0
在 Grails 中使用 jQuery 和 DataTables

本文介绍如何构建一个基于 Grails 的数据浏览器来可视化复杂的表格数据。 我是 Grails 的忠实粉丝。当然,我主要是热衷于利用命令行工具来探索和分析数据的数据从业人员。数据从业人员经常需...

作者: Chris Hermansen
11/24
0
0
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.4K
9

没有更多内容

加载失败,请刷新页面

加载更多

mysql 时间格式化

DATE_FORMAT

1713716445
6分钟前
0
0
聊聊flink的PartitionableListState

序 本文主要研究一下flink的PartitionableListState PartitionableListState flink-runtime_2.11-1.7.0-sources.jar!/org/apache/flink/runtime/state/DefaultOperatorStateBackend.java /*......

go4it
11分钟前
0
0
Micropython教程之TPYBoard开发板制作电子时钟(萝卜学科编程教育)

1.实验目的 1. 学习在PC机系统中扩展简单I/O?接口的方法。 2. 什么是SPI接口。 3. 学习TPYBoard I2C接口的用法。 4. 学习LCD5110接线方法。 5. 设定时钟并将当前时间显示在LCD5110上。 2.所需...

bodasisiter
11分钟前
0
0
js 闭包

闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是 ECMAScript 规范给的定义,如果没有实战经验,很难从定义去理解它。因此,本文不会对闭包的概念...

MrBoyce
16分钟前
0
0
Java B2B2C o2o多用户商城 springcloud架-企业云架构common-service代码结构分析

当前的分布式微服务云架构平台使用Maven构建,所以common-service的通用服务按照maven构建独立的系统服务,结构如下: particle-commonservice: spring cloud 系统服务根项目,所有服务项目...

itcloud
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部