jquery分页对象使用示例


Posted in Javascript onApril 01, 2014

使用方法和相关参数如下:
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>
Javascript 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
JavaScript对象的property属性详解
Apr 01 #Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 #Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 #Javascript
js改变鼠标的形状和样式的方法
Mar 31 #Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 #Javascript
js简单的表格添加行和删除行操作示例
Mar 31 #Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
英语专业毕业生自荐信
2013/10/28 职场文书
业务经理岗位职责
2013/11/11 职场文书
应聘自荐信
2013/12/14 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
大型会议策划方案
2014/05/17 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python