DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery分頁對象使用示例
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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved