js分页页码显示逻辑实现的两种方法

来源：互联网发布：老人摔倒报警器知乎编辑：程序博客网时间：2024/05/16 06:38

第一种：之前在项目中用到的比较笨重的方式，纯代码的形式实现，用到<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>

实例效果图：

实例2展示

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

2 0