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