freemarker 模板分页代码,内含使用方式

前端页面呈现使用 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>&hellip;
</#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)>
&hellip;
</#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>  

使用方式就到这,若有更好的处理方式欢迎留言…!

(如有转载,请标明出处;若有侵权那非常抱歉,请联系删除!)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值