DoraCMS 分页改造
一直准备改造DoraCMS 的分页,今天有空处理了一下。之前的分页是基于angularJS,但是不太好控制,多余的页码也不方便显示。于是重新改造了,直接使用原生的js去显示分页,后台返回数据不变
一直准备改造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>
很赞哦! ( 0
)