javascript分頁(當前頁碼置中)

    function setPage(opt){        if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false};                        var allPageNum = opt.allPageNum; //總的頁數        var showPageNum = opt.showPageNum; //顯示的頁數        var curpageNum = opt.curpageNum; // 當前的頁數                var pageDIvBox = document.getElementById(opt.pageDivId);        //左邊或右邊顯示頁碼的個數        var lrNum = Math.floor(showPageNum/2);                 if(curpageNum>1){            var oA = document.createElement('a');                oA.href='#1';                oA.innerHTML = '首頁'                pageDIvBox.appendChild(oA);        }                if(curpageNum>1){            var oA = document.createElement('a');                oA.href='#'+(curpageNum-1);                oA.innerHTML = '上一頁'                pageDIvBox.appendChild(oA);        }                if(curpageNum<showPageNum-2 || allPageNum == showPageNum){            for(var i=1;i<=showPageNum;i++){                var oA = document.createElement('a');                oA.href = '#'+i;                if(curpageNum==i){                    oA.innerHTML = i;                    }else{                    oA.innerHTML = "[" + i + "]";                    }                        pageDIvBox.appendChild(oA);            }            }else{            //倒數第一頁的處理            if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1){                for(var i=1;i<=showPageNum;i++){                    console.log((curpageNum - showPageNum + i));                    var oA = document.createElement('a');                    oA.href = '#'+ (curpageNum - (showPageNum-1) + i);                    if(curpageNum == (curpageNum - (showPageNum-1) + i)){                        oA.innerHTML = (curpageNum - (showPageNum-1) + i)                    }else{                        oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']'                    }                    pageDIvBox.appendChild(oA);                }            }            //最後一頁的處理            else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum){                for(var i=1;i<=showPageNum;i++){                    console.log((curpageNum - showPageNum + i));                    var oA = document.createElement('a');                    oA.href = '#'+ (curpageNum - showPageNum + i);                    if(curpageNum == (curpageNum - showPageNum + i)){                        oA.innerHTML = (curpageNum - showPageNum + i)                    }else{                        oA.innerHTML = '['+(curpageNum-showPageNum + i)+']'                    }                    pageDIvBox.appendChild(oA);                }            }else{                for(var i=1;i<=showPageNum;i++){                    var oA = document.createElement('a');                    oA.href = '#'+     (curpageNum - (showPageNum-lrNum) + i);                    if(curpageNum == (curpageNum - (showPageNum-lrNum) + i)){                        oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i)                    }else{                        oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']'                    }                    pageDIvBox.appendChild(oA);                }            }        }                if(curpageNum<allPageNum){            for(var i=1;i<=2;i++){                if(i==1){                    var oA = document.createElement('a');                    oA.href='#'+(parseInt(curpageNum)+1);                    oA.innerHTML = '下一頁'                }else{                    var oA = document.createElement('a');                    oA.href='#'+allPageNum;                    oA.innerHTML = '尾頁'                }                pageDIvBox.appendChild(oA);            }        }                var oA = document.getElementsByTagName('a');        //給頁碼添加點擊事件        for(var i=0;i<oA.length;i++){            oA[i].onclick = function(){                //當前點的頁碼                var sHref = this.getAttribute('href').substring(1);                //清空頁數顯示                pageDIvBox.innerHTML = '';                setPage({                    pageDivId:'page',                    showPageNum:5, //顯示的個數                    allPageNum:10, //總頁數                    curpageNum:sHref //當前頁數                })            }        }    }    window.onload = function(){        setPage({            pageDivId:'page',            showPageNum:5, //顯示的個數            allPageNum:10, //總頁數            curpageNum:1 //當前頁數        })        }

 

昨天看了妙味課堂的 分頁視頻教程，今天自己參照其思路，自己寫了下，並且自己新增了一個‘顯示頁碼個數’的屬性 ‘showPageNum’;

 

下面對關鍵的幾個地方做個總結：

 

 1.點擊的當前頁碼需要在顯示的頁碼中置中;

無論是顯示  3頁 5頁 7頁 9頁…… 等等

當前頁要置中，可以推出一個公式

用顯的頁碼個數除以2 再取整，就可以得到左右需要顯的頁碼個數。這個對後面的分頁判斷很有用

var lrNum = Math.floor(showPageNum/2); 

 

2.擷取頁碼

this.getAttribute('href') 用它可以得到相對路徑;
this.href 用它只能得到絕對路徑

DEMO下載