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 动态生成方法的例子
Jul 22 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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利用递归实现删除文件目录的方法
2016/09/23 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python之os操作方法(详解)
2017/06/15 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
洗发露广告词
2014/03/14 职场文书
本科毕业生求职信
2014/06/15 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
收款授权委托书
2014/10/02 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
车辆管理制度范本
2015/08/05 职场文书
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js