一直准备改造DoraCMS 的分页,今天有空处理了一下。之前的分页是基于angularJS,但是不太好控制,多余的页码也不方便显示。于是重新改造了,直接使用原生的js去显示分页,后台返回数据不变,后台返回到前台主要参数:


pageInfo.currentPage : 当前页码

pageInfo.totalItems : 总记录数

pageInfo.limit : 每页显示记录数


具体实现:

<!--分页模块-->
<div class="pagenation text-center">
    <ul>
        <%var localUrl;var param ='';%>
        <%if(pageType == 'index'){
            localUrl = "/page";
        }else if(pageType == 'cate'){
            localUrl = '/'+ cateInfo.defaultUrl + '___' + cateInfo._id;
        }else if(pageType == 'search'){
            param = '?searchKey=' + pageInfo.searchKey;
            localUrl = '/content/searchResult/items';
        }
        %>

        <%var totalItems = pageInfo.totalItems;var limit = pageInfo.limit%>
        <%var totalPage = Math.ceil(totalItems / limit) ;%>

        <%
        var page_start = pageInfo.currentPage - 2 > 0 ? pageInfo.currentPage - 2 : 1;
        var page_end = page_start + 4 >= totalPage ? totalPage : page_start + 4;
        %>

        <%if(pageInfo.currentPage != 1){%>
        <li><a href="<%=localUrl%>—1.html<%=param%>">«</a></li>
        <%}%>

        <% if (page_start > 1) { %>
        <li><a>...</a></li>
        <% } %>

        <%for(var i=page_start;i<=page_end;i++){%>
            <%if(i == pageInfo.currentPage){%>
                 <li class="active"><a><%=i%></a></li>
            <%}else{%>
                 <li><a href="<%=localUrl%>—<%=i%>.html<%=param%>"><%=i%></a></li>
            <%}%>
        <%}%>

        <% if (page_end < totalPage ) { %>
        <li><a>...</a></li>
        <% } %>

        <%if(pageInfo.currentPage != totalPage){%>
            <li><a href="<%=localUrl%>—<%=totalPage%>.html<%=param%>">»</a></li>
        <%}%>
    </ul>
</div>