jquery分页对象使用示例_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>

时间: 2024-10-28 01:05:31

jquery分页对象使用示例_jquery的相关文章

jquery分页对象使用示例

 这篇文章主要介绍了jquery分页对象使用示例,需要的朋友可以参考下 使用方法和相关参数如下:  displayId//默认值显示区域Id为pageBox,可以不填  pagesize//每页条数,默认是15条,可以不填  totalsize//总条数  curpage//当前页数  simple//默认是false,true没有上一页和下一页,  type//0默认走http跳转,1是jsp页面必须有pageCallBack(pageNum)函数,从1开始  url//链接地址,如果type

jQuery深拷贝Json对象简单示例_jquery

本文实例讲述了jQuery深拷贝Json对象的简单实现方法.分享给大家供大家参考,具体如下: var oldJson = { Name: 'quber', List: [1, 2, 3, 4], Obj: [ { name: 'qubernet', fun: function () { return 1; } }, { name: 'qubernet1', fun: function () { return 2; } } ] }; var newJson = $.extend(true, {},

对之前写的jquery分页做下升级_jquery

以前写的分页用了好久了,但是分页时除了传页面外有时还要传一些其它参数,以前操作时要把传的参数放到隐藏hidden中,分页时在取出来,这样比较麻烦,今天无事,重新包装了一下 直接上代码吧 css用了bootstrap中分页的样式 .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span { border-bottom-left-radius: 6px; border-top-left-rad

jquery 事件对象属性小结_jquery

使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入: $("#testDiv").bind("click", function(event) { }); 关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events

读jQuery之一(对象的组成)_jquery

对于jQuery的写法甚是困惑,尤其在使用Prototype的$后,一度不能理解jQuery的$.对于现在前端同学来说,可能第一个接触的就是jQuery了,他们会觉得很习惯,很自然. 至今电脑里还存放着当时的API文档,发个图感叹下 在这段时间内,我的入门老师是墨墨,其实至今他仍然是我敬仰的同事之一.他的编程造诣很高,相信早已突破了编程语言的限制.在大家都在使用Prototype.js的时候,在jQuery尚未在国内流行的时候,他就已经把jQuery引入到项目中了. 言归正传吧,目前的jQuer

jquerydom对象的事件隐藏显示和对象数组示例_jquery

1.事件处理 1.1.事件绑订 bind(type,fn); 例子: 复制代码 代码如下: $(function(){ //正式的写法 $('#d1').bind('click',function(){ $(this).css('font-size','80px'); }); //简写形式 $('#d1').click(function(){ $(this).css('font-size','80px'); }); }); 1.2.绑订方式的简写形式 复制代码 代码如下: click(funct

jQuery图片切换插件jquery.cycle.js使用示例_jquery

Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. 复制代码 代码如下: <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascri

Jquery实现自定义弹窗示例_jquery

在项目开发中,如果我们使用javascript自带的提示对话框,感觉不怎么美观,所以我们通常都是自己定义一些对话框,这里我实现点击按钮就弹窗一个登录的窗口,点击该窗口并可以实现拖拽功能,太多文字的东西说不清楚,直接用代码说话. 这里我将HTML.CSS.Jquery代码分别贴出来 HTML部分: 复制代码 代码如下: <button id="show" class="alter">弹窗</button> <!-- 弹窗部分-->

jquery map方法使用示例_jquery

jQuery.map( array, callback(elementOfArray, indexInArray) ) Returns: Array 感觉jquery的map方法非常好用,特向大家分享下. 方法作用:将数组或单个对象,替换为新的内容. 应用实例:获取一组checkbox的值,以英文逗号分隔,进行拼接. 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http