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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
JavaScript中的类继承
Nov 25 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
Nuxt使用Vuex的方法示例
Sep 06 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
js模拟微博发布消息
2017/02/23 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
金融专业毕业生推荐信
2013/11/26 职场文书
高中学生期末评语
2014/04/25 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2016新年慰问信范文
2015/03/25 职场文书
法制工作总结2015
2015/07/23 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB