基于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 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
PHP PDO操作总结
Nov 17 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 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
用户的详细注册和判断
2006/10/09 PHP
用PHP4访问Oracle815
2006/10/09 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP之数组学习
2011/05/29 PHP
php生成shtml类用法实例
2014/12/09 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
公司授权委托书
2014/10/17 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA