前端页面呈现使用 freemarke模板,可以根据自己的需求更改样式!话不多说,直接上码!
码内有使用方式说明书,复制粘贴可用
<#assign ctx=request.contextPath />
<#-- 自定义的分页指令
前置条件:需要导入jQuery.js
属性说明:
pageIndex 当前页号(int类型)
pageSize 每页显示数量(int类型)
recordCount 总数(int类型)
toURL 点击分页跳转URL(String类型)
使用方式:
<#if recordCount??>
<#import "common/pager.html" as page>
<@page.pager pageIndex=pageIndex pageSize=pageSize recordCount=recordCount toURL="url"/>
</#if>
-->
<#macro pager pageIndex pageSize recordCount toURL>
<#-- 定义局部变量pageCount保存总页数 -->
<#assign pageCount=((recordCount + pageSize - 1) / pageSize)?int>
<#if recordCount==0><#return/></#if>
<#-- 输出分页样式 -->
<style type="text/css">
#pagerForm {background: #FFFFFF}
.pagination {padding: 5px;font-size:12px}
.pagination a, .pagination a:link, .pagination a:visited {padding:4px 8px;margin:2px;border:1px solid #5A93FC;text-decoration:none;color:#006699;}
.pagination a:hover, .pagination a:active {background: #5A93FC;color: #ffffff;text-decoration: none;}
.pagination span.current {padding: 4px 8px;margin: 2px;border: 1px solid #5A93FC;font-weight: bold;background-color: #5A93FC;color: #FFF;}
.pagination span.disabled {padding: 4px 8px;margin: 2px;border: 1px solid #eee; color: #ddd;}
</style>
<#-- 控制JS代码 -->
<script type="text/javascript">
function toPage(index){
//获取当前页码
$("#pageIndex").val(index);
//设置表单请求的URL地址
$("#pagerForm").action="${toURL}";
//表单提交
$("#pagerForm").submit();
}
function gradeChange(){
var objS = document.getElementById("select");
var grade = objS.options[objS.selectedIndex].value;
$("#pageSize").val(grade);
$("#pageIndex").val(1);
//设置表单请求的URL地址
$("#pagerForm").action="${toURL}";
//表单提交
$("#pagerForm").submit();
}
</script>
<#-- 页号越界处理 -->
<#if (pageIndex > pageCount)>
<#assign pageIndex=pageCount>
</#if>
<#if (pageIndex < 1)>
<#assign pageIndex=1>
</#if>
<#-- 输出分页表单-->
<div class="pagination">
<form id="pagerForm" method="POST" >
<#--把数据缓存,当点击时带回数据-->
<input type="hidden" id="pageIndex" name="pageIndex" value="${pageModel.pageIndex!}"/>
<input type="hidden" name="student" value="${student!}" />
<input type="hidden" name="number" value="${number!}" />
<#-- 上一页处理 -->
<#if (pageIndex == 1)>
<span class="disabled">上一页</span>
<#else>
<a href="javascript:void(0);" onclick="toPage(${pageIndex - 1})">上一页</a>
</#if>
<#-- 如果前面页数过多,显示... -->
<#assign start=1>
<#if (pageIndex > 4)>
<#assign start=(pageIndex - 1)>
<a href="javascript:void(0);" onclick="toPage(1)">1</a>
<a href="javascript:void(0);" onclick="toPage(2)">2</a>…
</#if>
<#-- 显示当前页号和它附近的页号 -->
<#assign end=(pageIndex + 1)>
<#if (end > pageCount)>
<#assign end=pageCount>
</#if>
<#list start..end as i>
<#if (pageIndex == i)>
<span class="current">${i}</span>
<#else>
<a href="javascript:void(0);" onclick="toPage(${i})">${i}</a>
</#if>
</#list>
<#-- 如果后面页数过多,显示... -->
<#if (end < pageCount - 2)>
…
</#if>
<#if (end < pageCount - 1)>
<a href="javascript:void(0);" onclick="toPage(${(pageCount - 1)})">${(pageCount-1)}</a>
</#if>
<#if (end < pageCount)>
<a href="javascript:void(0);" onclick="toPage(${pageCount})">${pageCount}</a>
</#if>
<#-- 下一页处理 -->
<#if (pageIndex == pageCount)>
<span class="disabled">下一页</span>
<#else>
<a href="javascript:void(0);" onclick="toPage(${pageIndex + 1})">下一页</a>
</#if>
共${pageModel.recordCount}条记录,分 ${pageModel.pageTotal}页
每页显示 <select name="pageSize" id="select" onchange="gradeChange()" >
<option value="10">10条</option>
<option value="25" <#if pageModel.pageSize==25>selected</#if> >25条</option>
<option value="50" <#if pageModel.pageSize==50>selected</#if> >50条</option>
<option value="100" <#if pageModel.pageSize==100>selected</#if> >100条</option>
</select>
</form>
</div>
</#macro>
使用方式就到这,若有更好的处理方式欢迎留言…!
(如有转载,请标明出处;若有侵权那非常抱歉,请联系删除!)