快捷導(dǎo)航

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

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

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

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

本分頁(yè)欄組件具有以下特性：

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

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

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

請(qǐng)您動(dòng)手注釋掉本示例以下源碼，然后從界面上比較注釋前后兩者的區(qū)別。您還可以比較一下Google的分頁(yè)行為，您會(huì)發(fā)現(xiàn)其行為就是注釋掉本示例以下代碼后的行為。在編寫(xiě)本示例的時(shí)候我研究了Google的分頁(yè)行為，然后再逐步演變擴(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ù)說(shuō)明如下：
rowsCount(number)：記錄總數(shù)。
pageSize(number)：每頁(yè)顯示的記錄數(shù)。
curPage(number)：當(dāng)前頁(yè)頁(yè)碼。
toPage(string)：一個(gè)函數(shù)名，實(shí)現(xiàn)跳到指定頁(yè)的邏輯。
deviation(number)：當(dāng)前頁(yè)碼的左邊或右邊顯示的頁(yè)碼個(gè)數(shù)。

分頁(yè)欄示例下載