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

希望可以幫到有需要的童鞋。。。

 

轉載請標明出處！！