基于Jquery实现表格动态分页实现代码


Posted in Javascript onJune 21, 2011

当页面点击分页图标时,程序会自动去后台获取对应页数的记录。
关键代码如下:
需要引入的css和js文件有:

<link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> 
<link ID="skin" rel="stylesheet" type="text/css" href="<%=basePath %>css/config.css" /> 
<script language="javascript" type="text/javascript" src="<%=basePath %>js/jquery.js"></script>

其中jsp页面代码如下:
<script language="jscript" type="text/javascript"> 
var pageIndex = 1; //当前页数 
$(function(){ 
GetPageCount();//获取分页数量以及总的记录条数 
$("#load").hide();//隐藏loading提示 
$("#template").hide();//隐藏模板 
ChangeState(0,1);//设置翻页按钮的初始状态 
bind();//绑定第一页的数据 
//第一页按钮click事件 
$("#first").click(function(){ 
pageIndex = 1; 
ChangeState(0,1); 
bind(); 
}); 
//上一页按钮click事件 
$("#previous").click(function(){ 
pageIndex -= 1; 
ChangeState(-1,1); 
if(pageIndex <= 1){ 
pageIndex = 1; 
ChangeState(0,-1); 
} 
bind(); 
}); 
//下一页按钮click事件 
$("#next").click(function(){ 
pageIndex += 1; 
ChangeState(1,-1); 
if(pageIndex>=pageCount) 
{ 
pageIndex = pageCount; 
ChangeState(-1,0); 
} 
bind(pageIndex); 
}); 
//最后一页按钮click事件 
$("#last").click(function(){ 
pageIndex = pageCount; 
ChangeState(1,0); 
bind(pageIndex); 
}); 
//每页显示记录条数select事件 
$("#pageSize").change(function(){ 
bind(); 
}) 
}); 
//AJAX方法取得数据并显示到页面上 
function bind(){ 
$("#load").show(); 
var pageSize = $("#pageSize").val(); 
$.ajax({ 
type: "get",//使用get方法访问后台 
dataType: "json",//返回json格式的数据 
url: "<%=basePath%>actionSmUser.do?method=listUser2",//要访问的后台地址 
data: "pageIndex=" + pageIndex+"&pageSize="+pageSize,//要发送的数据 
complete : function(msg){//msg为返回的数据,在这里做数据绑定 
$("[id=ready]").remove(); 
var data = eval("("+msg.responseText+")"); 
$.each(data, function(i, n){ 
var row = $("#template").clone(); 
row.find("#userId").text(n.userId); 
row.find("#userName").text(n.userName); 
row.find("#depId").text(n.depId); 
row.find("#createTime").text(n.createTime); 
if(n.createTime !== undefined) row.find("#createTime").text(n.createTime); 
row.find("#creator").text(n.creator); 
row.find("#menusId").text(n.menusId); 
row.find("#isValid").text(n.isValid); 
row.attr("id","ready");//改变绑定好数据的行的id 
row.appendTo("#datas");//添加到模板的容器中 
}); 
$("[id=ready]").show(); 
SetPageInfo(); 
} 
}); 
} 
function ChangeDate(date){ 
return date.replace("-","/").replace("-","/"); 
} 
//设置第几页/共几页的信息 
function SetPageInfo(){ 
var pageCount = $("#pageCount").val(); 
var totalCount = $("#totalCount").val(); 
var pageSize = $("#pageSize").val(); 
$("#pageinfo").html(" 第<input class='default_pgCurrentPage' id='pageIndex' type='text' value='"+pageIndex+ 
"' style='width: 30px' /> 页" + "/" +"共 "+pageCount+"页"+ 
" 检索到 "+totalCount+"条记录,显示第 "+(pageIndex*pageSize-pageSize)+" 条 - 第 "+(pageIndex*pageSize)+" 条记录"); 
} 
//AJAX方法取得分页总数 
function GetPageCount(){ 
var pageSize = $("#pageSize").val(); 
$.ajax({ 
type: "get", 
dataType: "text", 
url: "<%=basePath%>actionSmUser.do?method=getPageCount", 
data: "pageSize="+pageSize , 
async: false, 
success: function(msg){ 
var data = eval("("+msg+")"); 
$("#pageCount").val(data[0].pageCount); 
$("#totalCount").val(data[0].totalCount); 
} 
}); 
} 
//改变翻页按钮状态 
function ChangeState(state1,state2){ 
$("#first").attr("class","default_pgFirst default_pgBtn"); 
$("#previous").attr("class","default_pgPrev default_pgBtn"); 
$("#next").attr("class","default_pgNext default_pgBtn"); 
$("#last").attr("class","default_pgLast default_pgBtn"); 
if(state1 == 1) { 
document.getElementById("first").disabled = ""; 
document.getElementById("previous").disabled = ""; 
}else if(state1 == 0){ 
document.getElementById("first").disabled = "disabled"; 
document.getElementById("previous").disabled = "disabled"; 
$("#first").attr("class","default_pgFirstDisabled default_pgBtn"); 
$("#previous").attr("class","default_pgPrevDisabled default_pgBtn"); 
}if(state2 == 1){ 
document.getElementById("next").disabled = ""; 
document.getElementById("last").disabled = ""; 
}else if(state2 == 0){ 
document.getElementById("next").disabled = "disabled"; 
document.getElementById("last").disabled = "disabled"; 
$("#next").attr("class","default_pgNextDisabled default_pgBtn"); 
$("#last").attr("class","default_pgLastDisabled default_pgBtn"); 
} 
} 
</script>

html页面代码如下:
<body> 
<div> 
<div> 
<br /> 
<table id="datas" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;"> 
<tr class="fixheader"> 
<th width="14%"> 
用户ID</th> 
<th width="14%"> 
用户名称</th> 
<th width="14%"> 
所在科室</th> 
<th width="14%"> 
创建时间</th> 
<th width="14%"> 
创建人</th> 
<th width="14%"> 
菜单集名称</th> 
<th width="14%"> 
是否有效</th> 
</tr> 
<tr id="template" height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;"> 
<td id="userId" class="tdc"> 
</td> 
<td id="userName" class="tdc"> 
</td> 
<td id="depId" class="tdc"> 
</td> 
<td id="createTime" class="tdc"> 
</td> 
<td id="creator" class="tdc"> 
</td> 
<td id="menusId" class="tdc"> 
</td> 
<td id="isValid" class="tdc"> 
</td> 
</tr> 
</table> 
</div> 
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red"> 
LOADING.... 
</div> 
<div class="default_pgContainer" > 
<div class="default_container"> 
<div class="default_pgPanel" id="skinDiv"> 
<table class="default_pgToolbar"> 
<tr> 
<td class="black_pgCurrentPage"> 
<select id="pageSize" name="pageSize"> 
<option selected="selected" value="10">10</option> 
<option value="20">20</option> 
<option value="30">30</option> 
</select> 
</td> 
<td> 
<div id="first" class="default_pgFirst default_pgBtn" /> 
</td> 
<td> 
<div id="previous" class="default_pgPrev default_pgBtn" /> 
</td> 
<td class="default_separator"> 
</td> 
<td> 
<div id="next" class="default_pgNext default_pgBtn" /> 
</td> 
<td> 
<div id="last" class="default_pgLast default_pgBtn" /> 
</td> 
<td class="default_separator"> 
</td> 
<td> 
<span id="pageinfo"></span> 
</td> 
</tr> 
</table> 
</div> 
</div> 
</div> 
</div> 
<div id="test"></div> 
<input type="hidden" id="pageCount" style="width: 45px" /> 
<input type="hidden" id="totalCount" style="width: 45px" /> 
</body>

后台action中代码如下:
//分页获取用户信息 
public void listUser2(ActionMapping mapping, ActionForm form, 
HttpServletRequest request, HttpServletResponse response){ 
RequestTool tool = new RequestTool(request); 
Integer pageSize = tool.getIntParameter("pageSize"); 
Integer pageIndex = tool.getIntParameter("pageIndex"); 
ResultPage res = serviceSmUserImpl.findAllSmUsers(pageIndex, pageSize); 
List<SmUser> smUserList = (List<SmUser>)res.getResult(); 
JSONArray array = new JSONArray(); 
JSONObject object ; 
for(SmUser user:smUserList){ 
object = new JSONObject(); 
object.put("userId", user.getUserId()); 
object.put("userName",user.getUserName()); 
object.put("depId", user.getOrganCode()); 
object.put("createTime", user.getCreateTime()); 
object.put("creator", user.getCreator()); 
object.put("menusId", user.getMenusId()); 
object.put("isValid", (user.getValid().equals("1")?"有效":"无效")); 
array.add(object); 
} 
AjaxTool.returnAjaxResponse(response, array.toJSONString()); 
} 
//获取总的记录数和总页数 
public void getPageCount(ActionMapping mapping, ActionForm form, 
HttpServletRequest request, HttpServletResponse response){ 
RequestTool tool = new RequestTool(request); 
int pageSize = tool.getIntParameter("pageSize"); 
List<POJO> pojos = serviceSmUserImpl.findAll(); 
int pageCount = pojos.size()% pageSize > 0 ? (pojos.size()/ pageSize+1):(pojos.size()/ pageSize); 
JSONArray array = new JSONArray(); 
JSONObject object = new JSONObject(); 
object.put("pageCount", pageCount); 
object.put("totalCount", pojos.size()); 
array.add(object); 
AjaxTool.returnAjaxResponse(response,array.toJSONString()); 
}

文件打包下载
Javascript 相关文章推荐
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
基于jquery实现的表格分页实现代码
Jun 21 #Javascript
jquery异步请求实例代码
Jun 21 #Javascript
读jQuery之九 一些瑕疵说明
Jun 21 #Javascript
读jQuery之八 包装事件对象
Jun 21 #Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 #Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 #Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 #Javascript
You might like
比较完整的微信开发php代码
2016/08/02 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python zip文件 压缩
2008/12/24 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python实现静态服务器
2019/09/05 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
建筑工地标语
2014/06/18 职场文书
员工趣味活动方案
2014/08/27 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电