首先我們來(lái)分析一下谷歌分頁(yè)的實(shí)現(xiàn),根據(jù)是實(shí)現(xiàn)來(lái)計(jì)算出他的算法,我們?cè)谶@里呢,只實(shí)現(xiàn)每屏最大顯示數(shù)據(jù)位六頁(yè):如 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? 1 2 3 當(dāng)前頁(yè)是1 1 2 3
1 2 3 4 當(dāng)前頁(yè)是2 起始值1 未頁(yè) 4 1 2 3 4 5 當(dāng)前頁(yè)是3 起始值1 未頁(yè) 5 1 2 3 4 5 6 當(dāng)前頁(yè)是4 起始值1 未頁(yè) 6
?? ? ?
1.首先我們先實(shí)現(xiàn)開(kāi)始時(shí)顯示三頁(yè)并且當(dāng)前頁(yè)不可點(diǎn)擊,當(dāng)點(diǎn)擊第二頁(yè)是出現(xiàn)第四頁(yè)以此類(lèi)推?
??? ? 從上圖得知 當(dāng)前頁(yè)小于等于4時(shí)? 起始頁(yè)為1? 末頁(yè)=當(dāng)前頁(yè)+2
startindex=1;//為每屏顯示的頁(yè)數(shù)的起始索引 endindex=nowpage+2;;//為每屏顯示的頁(yè)數(shù)的結(jié)束索引,nowpage當(dāng)然就是當(dāng)前頁(yè)了
注意: 求和值后的endindex 如果endindex大于總頁(yè)數(shù)
那么:?this.endindex=this.countpage;
當(dāng)點(diǎn)擊第2頁(yè)的時(shí)候的效果
?當(dāng)點(diǎn)擊第3頁(yè)時(shí)
?當(dāng)點(diǎn)擊第4頁(yè)時(shí)我們出來(lái)第六頁(yè),好現(xiàn)在已經(jīng)是每屏顯示的最大條數(shù)(假如我們現(xiàn)在的總頁(yè)數(shù)超過(guò)六頁(yè)那么我們看第5頁(yè))
那么當(dāng)超過(guò)最大顯示頁(yè)數(shù)時(shí),是什么樣的呢,我們先分析一下
?
當(dāng)大于4時(shí)
2 3 4 5 6 7 當(dāng)前頁(yè)是5 起始值是2 未頁(yè) 7 3 4 5 6 7 8 當(dāng)前頁(yè)是6 起始值是3 未頁(yè) 8 4 5 6 7 8 9 當(dāng)前頁(yè)是7 起始值是4 未頁(yè) 9 5 6 7 8 9 10 當(dāng)前頁(yè)是8 起始值是5 未頁(yè) 10?
從試圖當(dāng)中我們不難看出這其中的規(guī)律,所以借下來(lái)我我們要實(shí)現(xiàn)的功能如圖
?
這是第5頁(yè)的現(xiàn)實(shí)效果,現(xiàn)在我們可一看到當(dāng)總頁(yè)數(shù)大于每屏最大顯示條數(shù)時(shí),前面的第一頁(yè)就消失了
?那么當(dāng)總最后不足以顯示6頁(yè)的時(shí)候呢,好,那么我們就從最后一頁(yè)開(kāi)始回顯6條,如圖
?
? ?? 承接上一篇博客
2.那么下面我們就按照上面的分析,來(lái)完成實(shí)現(xiàn)的算法 首先我們先分析一下分頁(yè)用到的變量我們首先要定當(dāng)前頁(yè),還有總記錄數(shù)和以及每頁(yè)顯示條數(shù)和每屏的開(kāi)始索引和結(jié)束索引,以及總的頁(yè)數(shù),和要查詢(xún)當(dāng)前頁(yè)的信息,以及每屏顯示的最大頁(yè)數(shù)值 定義好了這些下面我們就寫(xiě)我們的算法
//這是關(guān)于分頁(yè)的邏輯計(jì)算,算法多多營(yíng)養(yǎng)多多
if(endindex>lastPage){
endindex=lastPage;//其中endiex是索引結(jié)束,lastPage//是總的頁(yè)數(shù) }if(nowPage<=4&&nowPage+2<=lastPage){ endindex=nowPage+2;//nowPage代表當(dāng)前頁(yè) }if(nowPage>4&&nowPage+2<=lastPage){ startindex=nowPage-3; endindex=nowPage+2; }if(nowPage>4&&nowPage+2>lastPage&&nowPage>=6){ endindex=lastPage; startindex=lastPage-5; }
if(lastPage<=6){//這里的6當(dāng)然就是每屏顯示的最多頁(yè)數(shù)了,當(dāng)然可以根據(jù)自己的喜好改變也數(shù)那就要改變算法了
if(nowPage>=3)
endindex=nowPage+2>lastPage?lastPage:nowPage+2;
}
?
3.承接上文寫(xiě)一篇薄竟然要我分散份寫(xiě),有么有搞錯(cuò),莫非我真的out了嘛 下面我們要說(shuō)的就是如何實(shí)現(xiàn)當(dāng)點(diǎn)擊某頁(yè)的時(shí)候連接就變成紅色并且不能再點(diǎn),其實(shí)這個(gè)很簡(jiǎn)單的啦,只要用標(biāo)簽去控制連接就可以了,那么下面我們就具體操作一下 我想大家對(duì)這個(gè)都不算陌生吧,就是判斷點(diǎn)擊的頁(yè)數(shù)是不是當(dāng)前頁(yè)如果是,就不顯連接并變成紅色,反之···
<c:forEach begin="${startindex}" end="${endindex}" var="ph">
<c:choose>
<c:when test="${nowPage==ph}"> <a><font color="red"><span>${ph}</span></font></a> </c:when>
<c:otherwise>
<a href="${pageContext.request.contextPath}/studentServlet2?nowPage=${ph}">[<span>${ph}</span>]</a>
</c:otherwise>
</c:choose>
</c:forEach>
好,以上就是仿谷歌分頁(yè)的“兔”種算法(一)希望能給大家?guī)?lái)點(diǎn)點(diǎn)幫助 在這夜深人靜的時(shí)刻,我們敲著代碼,讓靈感飛一會(huì),其實(shí)我們敲得不是寂寞,是網(wǎng)絡(luò) 在仿谷歌分頁(yè)的“兔”種算法(二),我們將把page封裝,并且實(shí)現(xiàn)輸入想要查看的頁(yè) 數(shù),然后頁(yè)面跳轉(zhuǎn)功能 菜菜~~~暴走中~~~未完待續(xù)······
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
