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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
AJAX学习笔记
May 18 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
星际争霸中的热键
2020/03/04 星际争霸
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
深入理解Django中内置的用户认证
2017/10/06 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python中类的属性和方法介绍
2018/11/27 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python使用Pygame绘制时钟
2020/11/29 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
Nike香港官网:Nike HK
2019/03/23 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
Linux常见面试题
2013/03/18 面试题
中专毕业生自荐信
2013/11/16 职场文书
综合实践教学反思
2014/01/31 职场文书
五水共治一句话承诺
2014/05/30 职场文书
优秀员工事迹材料
2014/12/20 职场文书
人事文员岗位职责
2015/02/04 职场文书
学校捐书活动总结
2015/05/08 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
只用Python就可以制作的简单词云
2021/06/07 Python