在要求分页的程序中,我们一般会知道如下几个数据的参数:
总记录数count
每一页要显示的记录数:size
当前页:num
总页数我们可以通过count和size得到,在JS中可以使用Math.ceil()
编写我们的JS分页脚本page.js
//定义一个Page函数,接收两个参数,总记录数和参数列表var Page = function(count,params){
this.size=10;//初始化每一页显示10条数据
this.num=1;//当前页为第一页
this.count=count;
this.url;//定义一个url
this.cacheKey=Math.random();//定义一个随机数,保证在ajax传输的时候唯一地址,防止缓存提交
this.sumNum = function(){//得到总页数
return Math.ceil(this.count/this.size);
};
this.params = {};//定义一个参数列表
this.first=function(){//首页
this.show(1);
}
this.last=function(){//最后一页
this.show(this.sumNum());
}
this.next=function() {//下一页
this.show(this.num + 1);
}
this.prev=function() {//上一页
this.show(this.num - 1);
}
this.show=function(num) {//处理页面函数
if(num>0&&num<=this.sumNum()){
this.num = num;
//构造页面地址参数
var args = {'pager.offset':(this.num-1)*this.size,'page.size':this.size,'_temp':this.cacheKey};
for(p in this.params){
args[p] = this.params[p];
}
$.get(this.url,args,function(data){
showJson(data);//将异步请求的json数据显示出来
});
delete args;
}
}
this.reload=function(){//重新加载
this.clearCahce();//清除缓存
if(num>0&&num<=this.sumNum()){
this.show(this.num);
}else{
this.show(1);
}
}
this.clearCahce=function(){
this.cacheKey=Math.random();//改变key的值
}
this.bindForm=function(id){//绑定到表单中中
$(function(){
$('#'+id+' input[type=text]').each(function(i,input){
if($(input).val()!=''){
page.params[$(input).attr('name')] = $(input).val();
}
});
$('#'+id+' input:checked').each(function(i,input){
if($(input).val()!=''){
page.params[$(input).attr('name')] = $(input).val();
}
});
$('#'+id+' select').each(function(i,s){
if($(s).find('option:selected').val()!=''){
page.params[$(s).attr('name')] = $(s).find('option:selected').val();
}
});
$('#'+id).bind('submit',function(f){
for(var i=0;i<form.length;i++){
if(form[i].value==''){
$(form[i]).removeAttr('name');
}
}
});
});
}
}
要在前台页面做显示,我们一般是有我们定义的分页样式,例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<c:forEach items="${users}" var="users">
<tr>
<td>${users.userId}</td>
<td>${users.userName}</td>
<td>${users.userAge}</td>
<td>${users.userSex}</td>
</tr>
</c:forEach>
<table>
<div class="flickr">
当前页:<span id="currentPage">0</span>/<span id="sumPage">0</span> 页
<a href="javascript:void(0);" onclick="page.first();">首页</a>
<a href="javascript:void(0);" onclick="page.prev();">上页</a>
<a href="javascript:void(0);" onclick="page.next();">下页</a>
<a href="javascript:void(0);" onclick="page.last();">末页</a>
总共<span id="count" style="color: red;"></span>条
</div>
</body>
</html>
调用page.js和编写我们的脚本语句
<script type="text/javascript" src="page.js"></script>
<script type="text/javascript">
var basePath = "<%=preBasePath%>";
var page = new Page();
page.url = basePath+"UserAction!ajaxUser.do?";//请求的url地址
//初始化好友Page
function initPage(count){
page.count = count;
page.url = basePath+"orderAction!ajaxDish.do?resId="+resId+"&preId="+preId;
$('#currentPage').html(page.num);
$('#sumPage').html(page.sumNum());
$('#count').html(page.count);
}
$(function(){
initPage(${orderPageModel.count});
});
</script>
分享到:
相关推荐
主要给大家介绍了关于jQuery实现分页功能的相关资料,主要包含ajax请求和后台数据,文末给出了完整的demo示例,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
Ajax无刷新分页Jquery 可以设置自己的分页样式,利用ashx接受事件请求,值得一学
程序使用jquery方法提交请求,处理后将数据库绑定到页面中。 Ajax无刷新分页示例源码 程序介绍: 程序使用jquery方法提交请求,处理后将数据库绑定到页面中。 Ajax无刷新分页示例源码 程序介绍: 程序使用...
JAVAweb使用ajax实现了分页,并简单阐述了ajax请求时post和get的区别
用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果。
版本1.3以上即可,用ajax实现的一个轻便的简单分页.数据库sql采用between and 检索,性能还不错。欢迎高手指点改进。不胜感激! 使用方法:我把分页做成了一个小控件。引用控件(首先在web.config里注册该控件 ...
网上找的一些资料: hibernate+spring的一个简单分页实现; 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能; Hibernate+Struts分页代码
通过ajax调用后端Servlet,(调后端的Servlet名叫testservlet 可以在wzjpage.js第27行处修改。)返回一个JSON对象,要求:jSON对象中必须有 // datarows columns pageCount这3个对象。 //数据格式必须为: List[]>...
jquery.pagination 异步 分页
一个很好用的jquery实现的分页功能!!!实现不刷新页面的分页功能
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access 只用来玩玩.所以就用Access数据库了 jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回...
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,...
本文以最简单的方法为新手示范如何使用jquery实现ajax技术(所以本文是专为新手所写,老鸟勿喷,大神此处省略一万字)。至于什么是jquery什么是ajax,自己谷歌去。 首先新建一个名闻Ajax的asp.net web空应用程序,...
本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下 把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp 本人封装后,使用者需要在页面...
通过jquery ajax异步加载json数据进行数字分页
ajax请求后台无刷新分页 利用jquery.pagination插件,回传dataList和 pageCount
struts2+ajax 发送jquery请求分页,返回josn对象,引用js自动解析,有jar包
1.无刷新分页控件,以Northwind数据库为示例, 2.支持多种分页样式选择,也可以自己修改源代码自定义 3.可以单击任意字段排序 4.MsSql数据库封装访问类,可以修改代码...5.继承自IHttpHandler接口,实现http请求代理
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。 三、前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 ...