分頁功能是后臺管理系統(tǒng)中很常見的一個功能，今天我們就來看下如何實現(xiàn)一個簡單的分頁組件。

初步實現(xiàn)

首先從最簡單的情況考慮，假設(shè)一共有20頁，頁面中能出現(xiàn)的翻頁按鈕最多5個，當(dāng)前頁數(shù)是第10頁。那么這5個頁數(shù)按鈕上的數(shù)字分別是10，11，12，13，14。如果點擊頁數(shù)11，那么這5個分頁按鈕的數(shù)字變?yōu)?1，12，13，14，15。
從上面這種最簡單的情況來看，這個分頁組件應(yīng)該有以下這幾個變量：

• begin：起始頁數(shù)，這里是10.
• currentPage：當(dāng)前頁，我們這里，當(dāng)前頁等于begin。
• endpage：html頁面中最后一個分頁按鈕的數(shù)字。
• showPages：html頁面中最多能出現(xiàn)幾個分頁按鈕。
• totalPages:頁數(shù)總數(shù)，這里是20

這四個變量的關(guān)系很簡單:

    var begin=10;
    var currentPage=begin;
    var showPages=5;
    var end=begin+showPages;
    for(var i=begin;i<end;i++){
        console.log(i);//10，11，12，13，14
    }

現(xiàn)在我們把這段代碼封裝成一個函數(shù)，將currentPage和showPages作為變量抽象出來。

    function slicePage(currentPage,showPages) {
        var begin=currentPage;
        var end=begin+showPages;
        for(var i=begin;i<end;i++){
            console.log(i);
        }
    }
    slicePage(5,5);

特殊情況時

假設(shè)頁面上的數(shù)據(jù)只有3頁，設(shè)置的翻頁頁數(shù)按鈕有5個。那么上面的代碼就會出現(xiàn)問題，會多顯示4，5這2個按鈕。所以我們需要對end進行驗證。

    var totalPages=3;
    function slicePage(currentPage,showPages) {
        var begin=currentPage;
        var end=begin+showPages;
        if(end>totalPages){
            end=totalPages;
        }
        for(var i=begin;i<end;i++){
            console.log(i);
        }
    }
    slicePage(1,5);//1,2,3

如果我們傳的參數(shù)是1的話，那么結(jié)果是1，2，3.看上去沒什么問題，但是當(dāng)我們傳的參數(shù)是2的時候，打印出來的結(jié)果卻是2，3.按照常理來講沒，此時頁面上應(yīng)該保持?jǐn)?shù)量不變，結(jié)果應(yīng)該還是1，2，3。只不過currentPage變成了2而已。所以我們還需要對begin進行驗證。

    if(end>totalPages){
            end=totalPages+1;
            begin=end-showPages;
            begin=begin>0?begin:1;
        }

現(xiàn)在我們再來測試一下

    var totalPages=3;
    function slicePage(currentPage,showPages) {
        var begin=currentPage;
        var end=begin+showPages;
        if(end>totalPages){
            end=totalPages+1;
            begin=end-showPages;
            begin=begin>0?begin:1;
        }
        for(var i=begin;i<end;i++){
            console.log(i);
        }
    }
    slicePage(2,5);//1,2,3

在這種情況下，結(jié)果都是正常的。但是并沒有結(jié)束，我們還要對當(dāng)前頁在開始，中間，結(jié)尾部分這幾種情況進行測試。

    var totalPages=20;
    slicePage(1,5);//1,2,3,4,5
    slicePage(10,5);//10,11,12,13,14
    slicePage(17,5);//16,17,18,19,20
    slicePage(20,5);//16,17,18,19,20
    totalPages=3;
    slicePage(2,5);//1，2，3

經(jīng)過測試，發(fā)現(xiàn)我們打印出來的結(jié)果都是正確的，至此，生成頁面上按鈕個數(shù)和按鈕頁數(shù)的函數(shù)已經(jīng)寫好了。