原生js實現分頁效果

效果圖如下圖中的③或④所示:
js分頁

下面將以 什麼情況出現首頁-什麼情況出現上一頁-五個頁碼不同排佈情況-什麼情況出現下一頁-什麼情況出現尾頁-總頁碼提示-點擊頁碼進行切換 的思路實現該分頁效果。

<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                margin: 0 5px;
                color: #333;
            }
            #p1{
                width: 480px;
                margin: 200px auto;
            }</style>
<script type="text/javascript">
            window.onload=function(){
                page({
 
                    id:'p1',
                    nowNum:8,  //默認為1
                    allNum:16,  //默認為5
                    callback:function(now,all){  //傳入兩個參數:當前頁和總頁數
                        alert(now+'/'+all);
                    }
 
                })
            }
 
            //封裝好的分頁函數
            function page(opt){
 
                //判斷調用時是否傳入id,隻在傳入id的情況下使用該分頁函數
                if (!opt.id) {
                    return false;
                }
 
                var obj=document.getElementById(opt.id);
                var nowNum=opt.nowNum || 1;  //當前頁,默認1
                var allNum=opt.allNum || 5;  //總頁碼,默認5
 
                //看回調函數是否存在,如果存在就直接賦值,不存在則默認空
                var callback=opt.callback || function(){};
 
                //首頁,僅在當前頁大於等於4 且 總頁碼大於等於6的情況下出現&lsquo;首頁&rsquo;,圖①
                if (nowNum>=4 && allNum>=6) {
                    var oA=document.createElement('a');
                    oA.href='#1';
                    oA.innerHTML='首頁';
                    obj.appendChild(oA);
                }
 
                //上一頁,在當前頁大於等於2的情況下出現&lsquo;上一頁&rsquo;,圖②
                if (nowNum>=2) {
                    var oA=document.createElement('a');
                    oA.href='#'+(nowNum-1);
                    oA.innerHTML='上一頁';
                    obj.appendChild(oA);
                }
 
                //5個頁碼,分兩種情況,一是總頁碼小於等於5,二是總頁碼大於5,圖③和④
                if (allNum<=5) {  //總頁碼小於等於5
 
                    for (var i=1; i<=allNum; i++) {
                        var oA=document.createElement('a');
                        oA.href='#'+i;
                        if (nowNum==i) {  //當前頁頁碼不加[]
                            oA.innerHTML=i;
                        }else{
                            oA.innerHTML='['+ i +']';
                        }
 
                        obj.appendChild(oA);
                    }
 
                }else{  //總頁碼大於5
                    for (var i=1; i<=5; i++) {
 
                        var oA=document.createElement('a');
 
                        if (nowNum<3) {  //當前值小於3的情況,圖⑤
 
                            oA.href='#'+i;
                            if (nowNum==i) {
                                oA.innerHTML=i;
                            }else{
                                oA.innerHTML='['+ i +']';
                            }
 
                        }else if (nowNum>(allNum-2)) {  //當前值為最後兩個數值,圖⑥
 
                            oA.href='#'+(allNum+i-5);
 
                            if (nowNum==(allNum+i-5)) {
                                oA.innerHTML=(allNum+i-5);
                            }else{
                                oA.innerHTML='['+ (allNum+i-5) +']';
                            }
 
                        }else{
 
                            oA.href='#'+(nowNum-3+i);
                            if (i==3) {
                                oA.innerHTML=(nowNum-3+i);
                            }else{
                                oA.innerHTML='['+ (nowNum-3+i) +']';
                            }
 
                        }
 
                        obj.appendChild(oA);
                    }
                }
 
                //下一頁,當前值不等於總頁碼數且總頁碼數大於等於2的情況下,圖⑦
                if ((allNum-nowNum)>=1) {
                    var oA=document.createElement('a');
                    oA.href='#'+(nowNum+1);
                    oA.innerHTML='下一頁';
                    obj.appendChild(oA);
                }
 
                //尾頁,當總頁碼比當前頁至少大3,且總頁碼數大於等於6的情況下出現,圖⑧
                if ((allNum-nowNum)>=3 && allNum>=6) {
                    var oA=document.createElement('a');
                    oA.href='#'+allNum;
                    oA.innerHTML='尾頁';
                    obj.appendChild(oA);
                }
 
                //總共頁碼
                var oSpan=document.createElement('span');
                oSpan.innerHTML='共 '+ allNum +' 頁';
                obj.appendChild(oSpan);
 
                //執行回調函數
                callback(nowNum,allNum);
 
                //點擊切換
                var aA=obj.getElementsByTagName('a');
                for (var i=0; i<aA.length; i++) {
                    aA[i].onclick=function(){  //點擊哪個,則哪個href值中#後面的數值就為當前頁
                        var nowNum=parseInt(this.getAttribute('href').substring(1));
                        obj.innerHTML='';
 
                        //每點擊一次,就重新執行一次
                        page({
                            id:opt.id,
                            nowNum:nowNum,
                            allNum:allNum,
                            callback:callback
                        })
 
                        return false;
 
                    }
                }
 
            }
        </script>
<p id="p1"><!--<a href="#1">首頁</a>
            <a href="#6">上一頁</a>
            <a href="#5">[5]</a>
            <a href="#6">[6]</a>
            <a href="#7">7</a>
            <a href="#8">[8]</a>
            <a href="#9">[9]</a>
            <a href="#8">下一頁</a>
            <a href="#20">尾頁</a>
            <span>共20頁</span>--></p>
<p>&nbsp;</p>

 

發佈留言