基于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 相关文章推荐
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
jQuery的框架介绍
May 11 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
基于vue实现简易打地鼠游戏
Aug 21 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 执行系统命令的方法
2009/07/07 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
Vue中props的详解
2019/05/16 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python找出list中最常出现元素的方法
2016/06/14 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
高级运动鞋:GREATS
2019/07/19 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
表扬信格式模板
2015/05/05 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android