JavaScript實現分頁顯示

分頁常見於前端多數據頁面，現有的分頁插件不可勝數，我分享一種構建分頁顯示的方法，目標是將當前也放在帶顯示數組的中間，如（以10頁爲例）：

< 1 2 3 4 >

< 2 3 4 5 >

< 7 8 9 10 >

廢話不多說，直接上代碼：

// 參數：當前頁碼，頁碼顯示數，頁碼總數
function getPage(current, showCnt, pageCnt) {
    var array = []
    for (var i = 0; i < pageCnt; i++) {
        array.push(i + 1)
    }
    if (pageCnt <= showCnt) {
        return array.splice(0, pageCnt)
    } else if (pageCnt - current < showCnt - 1) {
        // 避免這種現象(12, 4, 15)
        return array.splice(pageCnt - showCnt, showCnt)
    } else if (current - Math.ceil(showCnt / 2) >= 0) {
        return array.splice(current - Math.ceil(showCnt / 2), showCnt)
    } else {
        return array.splice(0, showCnt)
    }
}

頁碼要想正常顯示就得考慮以下四種情況：

1.頁碼顯示數小於頁碼總數。這種情況不管當前是第幾頁都要顯示全部的頁碼，如（以3頁，顯示4個）：< 1 2 3 >、< 1 2 3 > 、< 1 2 3 >

2.頁碼顯示數大於頁碼總數，末尾的部分。這種情況不管當前是第幾頁都要顯示最後n個頁碼（以10頁，顯示4個爲例）：< 6 7 8 9 >、< 7 8 9 10 >、< 7 8 9 10 >、< 7 8 9 10 >。對於這種情況需要特別說明：< 6 7 8 9 >這是不屬於該情況的範疇，否則就該顯示爲< 7 8 9 10 >，這顯然不是我們希望的結果。

3.頁碼顯示數大於頁碼總數，而且是最中間的部分。這種情況是最常見的情況，應該保證當前頁碼在所有顯示頁碼的正中間（以10頁，顯示4個爲例）：< 2 3 4 5 >、< 3 4 5 6 >、< 4 5 6 7 >、< 5 6 7 8 >、<  6 7 8 9 >。

4.頁碼顯示數大於頁碼總數，最前面的部分。這種情況不管當前是第幾頁都要顯示最前面的n個頁碼（以10頁，顯示4個爲例）：< 1 2 3 4 >、< 1 2 3 4 >。