分頁欄是網頁上最常見不過的一個組件，本博文給出分頁欄的一個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)：當前頁碼的左邊或右邊顯示的頁碼個數。
分頁欄示例下載