jquery分页对象使用示例
更新时间：2014年04月01日 14:31:14 作者：
这篇文章主要介绍了jquery分页对象使用示例,需要的朋友可以参考下
使用方法和相关参数如下：
displayId//默认值显示区域Id为pageBox，可以不填
pagesize//每页条数，默认是15条，可以不填
totalsize//总条数
curpage//当前页数
simple//默认是false，true没有上一页和下一页，
type//0默认走http跳转，1是jsp页面必须有pageCallBack(pageNum)函数,从1开始
url//链接地址，如果type出入1此处就可以不填
例子：Page._run({totalsize:300,curpage:11,type:1,simple:true}
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page对象</title>
<style>
.pageBox,.pageBox1{ text-align:center; height:25px; padding:15px 0;}
.pageBox .pages a.up,.pageBox .pages a.down{ color:#6eb4ea; text-decoration:none; border:1px solid #ffffff; background:none;}
.pageBox .pages a.else{ background:none; border:none;}
.pageBox .pages a{ padding:3px 7px; border:1px solid #f3f6f6; background:#fdfdfd; margin:0 5px; color:#999999;}
.pageBox .pages a:hover,.pageBox .pages a.hover{ background:#6eb4ea; border:1px solid #6eb4ea; color:#ffffff; text-decoration:none;padding:2px 7px; }
pageBox .pages span{ padding:3px 7px; color:#999999;}
.fiv_sep{ height:3px; float:left; width:100%; font-size:4px; line-height:2px;}
</style>
<script type="text/javascript" src="../jquery/jquery.js"></script><!--jquery支持1.4以上版本-->
</head>
<body>
<h1>Page</h1>
<div class="pageBox" id="pageBox"></div>
<script type="text/javascript">
var Page = {
/**
displayId//默认值显示区域Id为pageBox，可以不填
pagesize//每页条数，默认是15条，可以不填
totalsize//总条数
curpage//当前页数
simple//默认是false，true没有上一页和下一页，
type//0默认走http跳转，1是jsp页面必须有pageCallBack(pageNum)函数,从1开始
url//链接地址，如果type出入1此处就可以不填
例子：Page._run({totalsize:300,curpage:11,type:1,simple:true}
*/
_run:function(param){
var totalpages = 1,//总页数
displayId="#pageBox",//显示区域Id
pagesize=15,//每页条数
totalsize=0,//总条数
curpage=1,//当前页数
url="",//链接地址
type=0,//0默认走http跳转，1传入回调函数
simple=false;//简单版本，没有上一页和下一页
if(param.type!=undefined)type=param.type;
if(param.displayId!=undefined)displayId=param.displayId;
if(param.pagesize!=undefined)pagesize=param.pagesize;
if(param.totalsize!=undefined)totalsize=param.totalsize;
if(param.curpage!=undefined)curpage=param.curpage;
if(param.url!=undefined)url=param.url;
if(param.simple!=undefined)simple=param.simple;
if(url.indexOf("?")==-1){
url += "?1=1";
}
if(totalsize>0){
totalpages = Page._getTotalPages(totalsize,pagesize);
if(curpage>totalpages){curpage=totalpages;}//传入页数大于总页数，就按最后一页算
if(totalpages>1){
var firstPage= simple?"":Page._builderPageArea(type,"up",url,curpage-1,"上一页",false,displayId),
lastPage = simple?"":Page._builderPageArea(type,"down",url,parseInt(curpage)+1,"下一页",false,displayId),pages = new Array();
if(curpage<=4){//第一页 无上一页
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//总页数超过5
for(var i=1;i<=5;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
pages.push('<span>...</span>');
pages.push(Page._builderPageArea(type,"",url,totalpages,totalpages,false,displayId));
}else{//总页数<=5的，列1,2，3,4，5
for(var i=1;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
}
if(curpage!=totalpages)pages.push(lastPage);
}else if(totalpages-curpage<=4){//最后一页 无下一页
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//总页数超过5
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push('<span>...</span>');
for(var i=totalpages-4;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
if(totalpages!=curpage) {pages.push(lastPage);}
}else{//总页数<=5的，列1,2，3,4，5
for(var i=1;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
if(curpage!=totalpages)pages.push(lastPage);
}
}else{//有上一页和最后一页 且总页数肯定大于5
pages.push(firstPage);
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push('<span>...</span>');
for(var i=curpage-2;i<=curpage+2;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
pages.push('<span>...</span>');
pages.push(Page._builderPageArea(type,"",url,totalpages,totalpages,false,displayId));
pages.push(lastPage);
}
var result = new Array();
result.push('<div class="pages">');
result.push(pages.join(''));
result.push('</div>');
$(displayId).html(result.join(''));
}
}else{
}
},
/**计算总页数*/
_getTotalPages:function(_totalsize,_pagesize){
if(_totalsize%_pagesize==0)
return _totalsize/_pagesize;
else
return parseInt(_totalsize/_pagesize)+1;
},
/**构造分页的每个页数区域*/
_builderPageArea:function(type,textType,url,page,text,_focus,_displayId){
var hrefStr,href= new Array();
if(type==0){
href.push(url);
href.push('&pagenum=');
href.push(page);
}else if(type==1){
href.push('javascript:void(0);pageCallBack(\\'');
href.push(page);
href.push('\\',\\'');
href.push(_displayId);
href.push('\\')');
}
hrefStr = href.join(''),result=new Array();
if(textType=='up'){
result.push('<a href="');
result.push(hrefStr);
result.push('" class="up">上一页</a>');
}else if(textType=='down'){
result.push('<a href="');
result.push(hrefStr);
result.push('" class="down">下一页</a>');
}else{
result.push('<a href="');
result.push(hrefStr);
if(_focus){
result.push('" style="background:#6EB4EA;color:#FFF;">');
}else{
result.push('">');
}
result.push(page);
result.push('</a>');
}
return result.join('');
}
};
Page._run({totalsize:100,curpage:1,pagesize:10});
</script>
</body>
</html>
您可能感兴趣的文章:
- jquery分页插件jpaginate在IE中不兼容问题
- jQuery客户端分页实例代码
- 使用PHP+JQuery+Ajax分页的实现
- jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
- jquery.pagination.js 无刷新分页实现步骤分享
- jquery.pagination +JSON 动态无刷新分页实现代码
- 基于jquery封装的一个js分页
- jQuery中jqGrid分页实现代码
- jQuery EasyUI API 中文文档 - Pagination分页
- 用jQuery中的ajax分页实现代码
- 一款Jquery 分页插件的改造方法（服务器端分页）
- 基于Jquery实现表格动态分页实现代码
- 基于jquery实现的表格分页实现代码
- 基于jQuery的实现简单的分页控件
- 基于JQuery的Pager分页器实现代码
- 基于jQuery的js分页代码
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- jquery+json实现的搜索加分页效果
- php jquery 实现新闻标签分类与无刷新分页
- jquery pagination插件实现无刷新分页代码
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
- jQuery插件分享之分页插件jqPagination
相关文章
有朋友问GridView控件对于跨行合并的问题，这可以用控件嵌套来完成，当然，我更喜欢在前台来用JS来控制网页元素的样式，而后台仅仅是根据客户的请求，来返回数据。2011-09-09
这篇文章主要介绍了详解jQuery UI库中文本输入自动补全功能的用法,其中重点讲解了常用的邮箱地址输入时后缀自动补全功能的使用,需要的朋友可以参考下2016-04-04
在jQuery库中，几乎所有的插件都被限制在它的命名空间里。全局的对象都很好地存储在jQuery命名空间里，因此当把jQuery和其它javascript类库一起使用时，不会引起冲突.2010-06-06
Jquery EasyUI Datagrid右键菜单实现方法
这篇文章主要为大家详细介绍了Jquery EasyUI Datagrid右键菜单的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
Jquery+bootstrap实现表格行置顶置底上移下移操作详解
这篇文章主要为大家详细介绍了Jquery+bootstrap实现表格行置顶置底上移下移操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
本文将详细介绍下jQuery获取/设置/添加/删除Select选择的Text和Value,感兴趣的你可以参考下本文或许对你有所帮助2013-03-03
jqGrid可以结合fancybox等插件完成超酷的弹出层效果，通过与php后台交互，可以轻松完成数据的添加与详情查看，而这个过程完全是一个ajax异步通信过程，是一个非常友好的富客户端应用，本文给大家介绍jqGrid表格应用之新增与删除数据，需要的朋友参考下2015-12-12
jQuery ui插件的使用方法代码实例，需要的朋友可以参考一下2013-05-05
这篇文章主要介绍了jQuery使用slideUp方法实现控制元素缓慢收起的功能,实例分析了jQuery中slideUp方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
jQuery和CSS3对于web前端开发肯定用得也比较多，接下来分享一些由jQuery和CSS3制作成的特效，希望对哪些喜欢学习特效的朋友有所帮助2013-04-04
最新评论