快捷導(dǎo)航

分頁欄的web標(biāo)準(zhǔn)實(shí)現(xiàn)

更新時(shí)間：2011年11月01日 20:55:33 作者：

分頁欄是網(wǎng)頁上最常見不過的一個(gè)組件，本博文給出分頁欄的一個(gè)web2.0標(biāo)準(zhǔn)示例，并作簡要分析

分頁欄是網(wǎng)頁上最常見不過的一個(gè)組件，本博文給出分頁欄的一個(gè)web2.0標(biāo)準(zhǔn)示例，并作簡要分析。本分頁欄的界面效果如下圖所示：

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

1、不論當(dāng)前頁碼是哪一個(gè)，分頁欄始終顯示第一頁的頁碼和最后一頁的頁碼（如上圖所示）。這樣，用戶不僅可以從最后的頁碼知道總共有多少頁，還能方便地在最后一頁和第一頁之間導(dǎo)航。

2、使展現(xiàn)的頁碼個(gè)數(shù)（省略符也算一個(gè)）始終固定，比如固定為9個(gè)。如下面兩個(gè)圖所示，當(dāng)前頁碼為1或9（或任意其他數(shù)字）時(shí)，展現(xiàn)的頁碼個(gè)數(shù)都為9個(gè)。這樣，下一頁按鈕的位置始終保持不變，在做Ajax分頁時(shí)，用戶可以在同一個(gè)位置多次點(diǎn)擊下一頁按鈕，而不會(huì)因?yàn)榘粹o位置發(fā)生變化而得移動(dòng)鼠標(biāo)，極大地提高了用戶體驗(yàn)。

3、通過接口參數(shù)可以方便地設(shè)置展現(xiàn)的頁碼個(gè)數(shù)。genPaginationHtml()接口的deviation（偏移量）參數(shù)用于設(shè)置當(dāng)前頁碼的左邊或右邊顯示的頁碼個(gè)數(shù)。所以，總共展現(xiàn)的頁碼個(gè)數(shù)等于2*deviation+1。比如，本示例中設(shè)置deviation為4，則總共展現(xiàn)9個(gè)頁碼。

請您動(dòng)手注釋掉本示例以下源碼，然后從界面上比較注釋前后兩者的區(qū)別。您還可以比較一下Google的分頁行為，您會(huì)發(fā)現(xiàn)其行為就是注釋掉本示例以下代碼后的行為。在編寫本示例的時(shí)候我研究了Google的分頁行為，然后再逐步演變擴(kuò)展。

復(fù)制代碼代碼如下:

 
//使總碼數(shù)固定 
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)接口參數(shù)說明如下：
rowsCount(number)：記錄總數(shù)。
pageSize(number)：每頁顯示的記錄數(shù)。
curPage(number)：當(dāng)前頁頁碼。
toPage(string)：一個(gè)函數(shù)名，實(shí)現(xiàn)跳到指定頁的邏輯。
deviation(number)：當(dāng)前頁碼的左邊或右邊顯示的頁碼個(gè)數(shù)。

分頁欄示例下載