cms:pagebar分页条标签-泽元知识库

　　标签描述：分页条标签，用于在列表页面展现分页条。(注意：此标签是跟列表上的标签一起使用，需要标签上添加pagesize跟page属性)

　　标签实例1：（默认样式）

<cms:pagebar></cms:pagebar> 或 <cms:pagebar />

显示效果：

　　标签实例2：(自己定义的样式)

<cms:pagebar> <input type="hidden" name="PageIndex" id="PageIndex" value="${Page.Index}" /> <input type="hidden" name="PageCount" id="PageCount" value="${Page.Count}" /> <ul class="g-ul"> <z:if condition="${Page.Count==0}"> <div align="center">   无记录</div> </z:if> <z:else> <li class="page_prev"><a href="javascript:changePage(${Page.Index});">上一页</a></li> <z:if condition="${Page.Count<=8}"> <z:for from="1" to="${Page.Count+1}"> <z:if condition="${i>=1&&i<=Page.Count}"> <z:if condition="${i-1==Page.Index}"> <li class="on hidden-xs"><a>${i}</a></li> </z:if> <z:else> <li class="hidden-xs"><a href="javascript:changePage(${i});">${i}</a></li> </z:else> </z:if> </z:for> </z:if> <z:else> <z:if condition="${Page.Index+6>=Page.Count}"> <z:for from="${Page.Count-7}" to="${Page.Count+1}"> <z:if condition="${i>=1&&i<=Page.Count}"> <z:if condition="${i-1==Page.Index}"> <li class="on hidden-xs"><a>${i}</a></li> </z:if> <z:else> <li class="hidden-xs"><a href="javascript:changePage(${i});">${i}</a></li> </z:else> </z:if> </z:for> </z:if> <z:else> <z:for from="${Page.Index-1}" to="${4+Page.Index}"> <z:if condition="${i>=1&&i<=Page.Count}"> <z:if condition="${i-1==Page.Index}"> <li class="on hidden-xs"><a>${i}</a></li> </z:if> <z:else> <li class="hidden-xs"><a href="javascript:changePage(${i});">${i}</a></li> </z:else> </z:if> </z:for> <z:if condition="${Page.Count>3&&Page.Index==0}"> <li class="hidden-xs"><a href="javascript:changePage(4);">4</a></li> </z:if> <z:if condition="${Page.Count>8}"> <li class="hidden-xs"><a>...</a></li> <li class="hidden-xs"><a href="javascript:changePage(${Page.Count-1});">${Page.Count-1}</a></li> <li class="hidden-xs"><a href="javascript:changePage(${Page.Count});">${Page.Count}</a></li> </z:if> </z:else> </z:else> <li class="page_next"> <a href="javascript:changePage(${Page.Index+2});">下一页</a></li> <li class="bot hidden-xs"><span>第<input id="JumpPage" type="text" value="1">/${Page.Count}页</span><a href="javascript:changePage(-2);">跳转</a></li> </z:else> </ul> </cms:pagebar> <script> //分页跳转 function changePage(pele){ var re = /^[0-9]*[1-9][0-9]*$/; var pageURL = window.location.href; if(pageURL.indexOf('//'>-1)){ pageURL = pageURL.substring(0,pageURL.lastIndexOf("/")); } var pagecount=$("#PageCount").val(); if(pele==-2){ pele = $("#JumpPage").val(); if(re.test(pele)){ pele=Number(pele); }else{ Dialog.warn("输入页码不合法");return; } if(pagecount<pele||pele<=0){ Dialog.warn("输入页码不合法");return; } } if(re.test(pele)){ pele=Number(pele); }else{ Dialog.warn("输入页码不合法");return; } if(pagecount<pele){ pele=pagecount; }else if(pele<=0){ pele=1; } if(pele==1){ if(window.location.href.indexOf("catalog")!=-1){ window.location="index_1.shtml"; }else{ window.location="index.shtml"; } }else if(pele>1 && pele <11){ window.location="index_"+pele+".shtml"; }else { window.location ="${FrontAppContext}ui/catalog/${Catalog.ID}/pc/index_"+pele+".shtml"; } } </script>

　　标签实例3：(自己定义的样式)

<div class="col-md-12 b-t pageBar text-center m-b-md p-t-md"> <cms:pagebar> ${(GetPageIndexScript)} <z:if condition="${Page.Index!=0}"> <div class="prev-page"><a href="javaScript:goto_page(${Page.Index})" href="javaScript:goto_page(${Page.Index})">上一页</a></div> </z:if> <z:else> <div class="prev-page"><a class="no" href="#" _href="#">上一页</a> </div> </z:else> <div class="hidden-xs page-num"> <z:if condition="${(Page.Index>5)&&(Page.Index+1<(Page.Count-4))}"> <z:for from="${Page.Index-4}" to="${Page.Index+6}" step="1"> <a href="javaScript:goto_page(${i})" class="${(Page.Index+1==i)?'hover':''}" _href="javaScript:goto_page(${i})">${i}</a> </z:for> </z:if> <z:else> <z:if condition="${Page.Count>9&&((Page.Index+1)>=(Page.Count-4))&&Page.Index+1<=Page.Count}"> <z:for from="${Page.Count-9}" to="${Page.Count+1}" step="1"> <a href="javaScript:goto_page(${i})" class="${(Page.Index+1==i)?'hover':''}" _href="javaScript:goto_page(${i})">${i}</a> </z:for> </z:if> <z:else> <z:for from="1" to="${(Page.Count<11)?Page.Count+1:11}" step="1"> <a href="javaScript:goto_page(${i})" class="${(Page.Index+1==i)?'hover':''}" _href="javaScript:goto_page(${i})">${i}</a> </z:for> </z:else> </z:else> </div> <z:if condition="${Page.Index!=Page.Count-1}"> <div class="next-page"><a href="javaScript:goto_page(${Page.Index+2})" _href="javaScript:goto_page(${Page.Index+2})">下一页</a></div> </z:if> <z:else> <div class="next-page"><a class="no" href="#" _href="#">下一页 </a></div> </z:else> <div class="hidden-xs page-pret"> 第<input class="pageInp m-l-xs" id="PageInp" type="text" size="3" value="${1+Page.Index}" style="" onkeyup="value=value.replace(/\D/g,'')"/> /<span class="pageCount m-r-xs"><a href="javaScript:goto_page(${Page.Count})" _href="javaScript:goto_page(${Page.Count})">${Page.Count}</a></span>页 <a href="javascript:void(0);" onclick="javaScript:goto_page($('#PageInp').val())" class="pagePret m-l-xs" _href="javascript:void(0);">跳转</a> </div> <div type="text/javascript" cdata_tag="script" cdata_data=" function goto_page(page) { if (/^\d+$/.test(page)) { window.location.href = _getPageIndexURL(page); } } </cms:pagebar> </div>

显示效果：