js實現前端分頁頁碼管理

 用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表達式控制的）」

但願能夠幫到有須要的童鞋。。。

 

轉載請標明出處！！