用JS實(shí)現(xiàn)前端分頁(yè)頁(yè)碼管理,可以很美觀的區(qū)分頁(yè)碼顯示(這也是參考大多數(shù)網(wǎng)站的分頁(yè)頁(yè)碼展示),能夠有很好的用戶體驗(yàn),這也是有業(yè)務(wù)需要就寫了一下,還是新手,經(jīng)驗(yàn)不足,歡迎指出批評(píng)!
首先先看效果圖:
這是初始頁(yè)面(也就是第一頁(yè))的界面,如果為第一頁(yè)時(shí),則首頁(yè)和上一頁(yè)按鈕不可用,為了展示分頁(yè)的效果,我當(dāng)前的分頁(yè)是一條一頁(yè)。
這是頁(yè)碼大于5頁(yè)時(shí)展示的效果:1,2頁(yè)始終始終顯示(考慮到用戶體驗(yàn))
這是最后一頁(yè)的效果圖:
下面直接上js代碼:
//頁(yè)碼顯示 $(function(){ var dqPage = $("#dqPage").text();//得到當(dāng)前頁(yè)數(shù) dqPage = parseInt(dqPage);//得到的文本轉(zhuǎn)成int var pageCount = $("#pageCount").text();//得到總頁(yè)數(shù) pageCount = parseInt(pageCount); var i = 1; i = parseInt(i); var item=""; var href = "這里是請(qǐng)求地址"; if (pageCount <= 5 ) {//總頁(yè)數(shù)小于五頁(yè),則加載所有頁(yè) for (i; i <= pageCount; i++) { if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } }; $('#pageBtn').append(item); return; }else if (pageCount > 5) {//總頁(yè)數(shù)大于五頁(yè),則加載五頁(yè) if (dqPage < 5) {//當(dāng)前頁(yè)小于5,加載1-5頁(yè) for (i; i <= 5; i++) { if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } }; if (dqPage <= pageCount-2) {//最后一頁(yè)追加“...”代表省略的頁(yè) item += "<span> . . . </span>"; } $('#pageBtn').append(item); return; }else if (dqPage >= 5) {//當(dāng)前頁(yè)大于5頁(yè) for (i; i <= 2; i++) {//1,2頁(yè)碼始終顯示 item += "<a href='"+href+i+"' >"+i+"</a>"; } item += "<span> . . . </span>";//2頁(yè)碼后面用...代替部分未顯示的頁(yè)碼 if (dqPage+1 == pageCount) {//當(dāng)前頁(yè)+1等于總頁(yè)碼 for(i = dqPage-1; i <= pageCount; i++){//“...”后面跟三個(gè)頁(yè)碼當(dāng)前頁(yè)居中顯示 if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } } }else if (dqPage == pageCount) {//當(dāng)前頁(yè)數(shù)等于總頁(yè)數(shù)則是最后一頁(yè)頁(yè)碼顯示在最后 for(i = dqPage-2; i <= pageCount; i++){//...后面跟三個(gè)頁(yè)碼當(dāng)前頁(yè)居中顯示 if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } } }else{//當(dāng)前頁(yè)小于總頁(yè)數(shù),則最后一頁(yè)后面跟... for(i = dqPage-1; i <= dqPage+1; i++){//dqPage+1頁(yè)后面... if (i == dqPage) { item += "<span class='disabled'>"+i+"</span>"; }else{ item += "<a href='"+href+i+"' >"+i+"</a>"; } } item += "<span> . . . </span>"; } $('#pageBtn').append(item); return; } } });
<%-- 得到當(dāng)前頁(yè)--%><span id="dqPage" hidden="hidden" class="disabled1 current">${page}</span><%-- js控制的頁(yè)碼顯示在這個(gè)div中--%><div id="pageBtn" style="width: auto;display:inline-block !important;height: auto;"></div>
這是實(shí)現(xiàn)js控制頁(yè)碼顯示的所有步驟,可能有點(diǎn)麻煩,后續(xù)會(huì)繼續(xù)優(yōu)化,當(dāng)然現(xiàn)在網(wǎng)上也有很多分頁(yè)插件,全憑個(gè)人喜好。
至于 “首頁(yè),上一頁(yè),下一頁(yè),末頁(yè),以及跳轉(zhuǎn)頁(yè),這些就看各自的需求實(shí)現(xiàn)了(我是用el表達(dá)式控制的)”
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持武林網(wǎng)!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注