分頁欄的web標準實現

分頁欄是網頁上最常見不過的一個組件，本博文給出分頁欄的一個web2.0標準樣本，並作簡要分析。本分頁欄的介面效果如所示：

本分頁欄組件具有以下特性：

1、不論當前頁碼是哪一個，分頁欄始終顯示第一頁的頁碼和最後一頁的頁碼（如所示）。這樣，使用者不僅可以從最後的頁碼知道總共有多少頁，還能方便地在最後一頁和第一頁之間導航。

2、使展現的頁碼個數（省略符也算一個）始終固定，比如固定為9個。如下面兩個圖所示，當前頁碼為1或9（或任意其他數字）時，展現的頁碼個數都為9個。這樣，下一頁按鈕的位置始終保持不變，在做Ajax分頁時，使用者可以在同一個位置多次點擊下一頁按鈕，而不會因為按鈕位置發生變化而得移動滑鼠，極大地提高了使用者體驗。

3、通過介面參數可以方便地設定展現的頁碼個數。genPaginationHtml()介面的deviation（位移量）參數用於設定當前頁碼的左邊或右邊顯示的頁碼個數。所以，總共展現的頁碼個數等於2*deviation+1。比如，本樣本中設定deviation為4，則總共展現9個頁碼。

請您動手注釋掉本樣本以下源碼，然後從介面上比較注釋前後兩者的區別。您還可以比較一下Google的分頁行為，您會發現其行為就是注釋掉本樣本以下代碼後的行為。在編寫本樣本的時候我研究了Google的分頁行為，然後再逐步演變擴充。
複製代碼 代碼如下:
//使總碼數固定
if (curPage - startNum < deviation) {
endNum += deviation - (curPage - startNum);
endNum = endNum > pagesCount ? pagesCount : endNum;
}
if (endNum - curPage < deviation) {
startNum -= deviation - (endNum - curPage);
startNum = startNum < 1 ? 1 : startNum;
};

最後給出genPaginationHtml(rowsCount, pageSize, curPage, toPage, deviation)介面參數說明如下：
rowsCount(number)：記錄總數。
pageSize(number)：每頁顯示的記錄數。
curPage(number)：當前頁頁碼。
toPage(string)：一個函數名，實現跳到指定頁的邏輯。
deviation(number)：當前頁碼的左邊或右邊顯示的頁碼個數。

分頁欄樣本下載