js分頁頁碼顯示邏輯實現的兩種方法

第一種：之前在項目中用到的比較笨重的方式，純代碼的形式實現，用到<c:if>判斷，有需要的朋友可作參考，自定義樣式就可以實現想要的分頁效果。

page.pageNo = 當前頁數
page.totalPage = 頁面總數

<div class="page">
            <c:if test="${page.pageNo > 1 }">
                <a
                    href="list?pageNo=${page.pageNo-1 } ">上一頁</a>
            </c:if>

            <c:if test="${page.pageNo != 1 }">
                <a href="list?pageNo=1 ">1</a>
            </c:if>

            <c:if test="${(page.pageNo-3) > 1 }">
                <span>…</span>
            </c:if>

            <c:if test="${(page.pageNo-2) > 1 }">
                <a
                    href="list?pageNo=${page.pageNo-2} ">${page.pageNo-2}</a>
            </c:if>

            <c:if test="${(page.pageNo-1) > 1 }">
                <a
                    href="list?pageNo=${page.pageNo-1} ">${page.pageNo-1}</a>
            </c:if>

            <c:if test="${page.pageNo != null}">
                <a style="background-color: white; color: black;"
                    href="list?pageNo=${page.pageNo} ">${page.pageNo}</a>
            </c:if>

            <c:if test="${page.totalPage > (page.pageNo+1)}">
                <a
                    href="list?pageNo=${page.pageNo+1} ">${page.pageNo+1}</a>
            </c:if>

            <c:if test="${page.totalPage > (page.pageNo+2)}">
                <a
                    href="list?pageNo=${page.totalPage+2} ">${page.pageNo+2}</a>
            </c:if>

            <c:if test="${page.totalPage > (page.pageNo+3)}">
                <span>…</span>
            </c:if>

            <c:if test="${page.pageNo != page.totalPage }">
                <a
                    href="list?pageNo=${page.totalPage} ">${page.totalPage}</a>
            </c:if>

            <c:if test="${page.pageNo < page.totalPage }">
                <a
                    href="list?pageNo=${page.pageNo+1} ">下一頁</a>
            </c:if>
        </div>

實現效果（沒有寫任何樣式，僅顯示邏輯。可根據自己情況添加樣式，不至於這麼醜。）：

第二種：使用js分頁插件，直接使用，不必再自己寫分頁邏輯。

url：”請求地址 ?pageNo=”

<script type="text/javascript" src="/resources/p2p/laypage/laypage.js"></script>
<script type="text/javascript">
function initPage(url){
    var totalPages = '${page.totalPages}';
    var next = "下一頁";
    if(totalPages==0||totalPages==null){
        next = false;
    }
    //好像很實用的樣子，後端的同學再也不用寫分頁邏輯了。
    laypage({
        cont: 'page11',
        next:next,
        pages: totalPages, //可以叫服務端把總頁數放在某一個隱藏域，再獲取。假設我們獲取到的是18
        curr: function(){ //通過url獲取當前頁，也可以同上（pages）方式獲取
            var page = location.search.match(/pageNo=(\d+)/);
            return page ? page[1] : 1;
        }(), 
        jump: function(e, first){ //觸發分頁後的回調
            if(!first){ //一定要加此判斷，否則初始時會無限刷新//
                location.href = url+e.curr;
            }
        }
    });
}
</script>

實例效果圖：

插件下載地址：http://download.csdn.net/detail/qq_34273222/9733660