数据分页标签控件Freemarker宏代码



使用freemarker实现了一个数据分页控件。如果当前页超过 指定显示的页数链接数 的一半，则当前页居中显示。例如：当前第10页，显示10个页数链接数，那么显示第6~第15页分页链接，且第10页居中。代码如下：

 

<#--
    分页标签：用于显示数据分页链接。
    pagination：分页对象。
    url：链接地址
    showPageLinkCount:显示的页数链接数
    isShowMoreLI:是否显示“<li>...li>”提示更多还有更多页数
    isNeedPageTo：是否显示转到指定页数的表单
-->
<#macro pager pagination url="#" showPageLinkCount=10 isShowMoreLI=true isNeedPageTo=true>
    <#if (pagination.totalCount)??>
        <#if (pagination.totalCount>1)>
            <#assign firstPageUrl=url+"?pageNo=1">
            <#assign prePageUrl=url+"?pageNo="+(pagination.pageNo-1)>
            <#assign nextPageUrl=url+"?pageNo="+(pagination.pageNo+1)>
            <#assign lastPageUrl=url+"?pageNo="+pagination.totalCount>

            <ul class="pager">
                <li class="firstPage">
                    <#if (pagination.pageNo>1)>
                        <a href="${firstPageUrl}">首页a>
                    <#else>
                        <span>首页span>
                    #if>
                li>

                <li class="prePage">
                    <#if (pagination.pageNo>1)>
                        <a href="${prePageUrl}">上一页a>
                    <#else>
                        <span>上一页span>
                    #if>
                li>

                <@outPutPageNo paginationpagination=pagination urlurl=url showPageLinkCountshowPageLinkCount=showPageLinkCount isShowMoreLIisShowMoreLI=isShowMoreLI/>

                <li class="nextPage">
                    <#if (pagination.pageNo<pagination.totalCount)>
                        <a href="${nextPageUrl}">下一页a>
                    <#else>
                        <span>下一页span>
                    #if>
                li>

                <li class="lastPage">
                    <#if (pagination.pageNo<pagination.totalCount)>
                        <a href="${lastPageUrl}">尾页a>
                    <#else>
                        <span>尾页span>
                    #if>
                li>

                <li class="pageInfo">
                    共 ${pagination.totalCount} 页
                li>

                <#if isNeedPageTo>
                    <li class="pageTo">
                        <form id="pagerForm" action="#" method="get" onsubmit="return $.formValidator.pageIsValid('pagerForm');">
                            转到第 <input type="text" id="pageToNum" name="page" class="pageToNum"> 页
                            <input type="submit" id="submitButton4Page" class="formButton" value="确定" hidefocus="">
                        form>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                validatorInitConfig(null,"pagerForm");
                                jQuery("#pageToNum").formValidator({
                                    validatorgroup:"pagerForm"
                                }).inputValidator({
                                    min : 1,
                                    max : 4,
                                    onerror : "请输入要转到的页数！"
                                }).regexValidator({
                                    regexp : "^[1-9]\\d*$",
                                    onerror : "页数只能是正整数！"
                                });
                            });
                        script>
                    li>
                #if>
            ul>
        #if>
    #if>
#macro>

<#--
    输出分页链接。如果当前页超过 显示的页数链接数 的一半，则当前页居中显示。例如：当前第10页，总共20页，那么显示第6~第15页分页链接，且第10页居中。
    pagination：分页对象。
    url：链接地址
    showPageLinkCount:显示的页数链接数
    isShowMoreLI:是否显示“<li>...li>”提示更多还有更多页数0
-->
<#macro outPutPageNo pagination url showPageLinkCount isShowMoreLI>
    <#--
        └────────────────────────────────────────────────┘
        A                                                             B

        └───────┴────────┘
        A1      PageNo  B1

        A->B:totalCount
        A1:startIndex
        B1:endIndex
        A1->B1:showPageLinkCount
        A1->PageNo:spaceOFStartIndexToPageNo
        A1->B1 -1:spaceOFStartIndexToPageLinkCount
    -->

    <#if (showPageLinkCount%2==1)>
        <#assign spaceOFStartIndexToPageNo=((showPageLinkCount+1)/2)-1>
    <#else>
        <#assign spaceOFStartIndexToPageNo=(showPageLinkCount/2)-1>
    #if>

    <#assign spaceOFStartIndexToPageLinkCount=(showPageLinkCount-1)>

    <#if ((pagination.pageNo-spaceOFStartIndexToPageNo) <= 1) || (pagination.totalCount<=showPageLinkCount)>
        <#assign startIndex=1>
        <#assign isNeedStartMore=false>
    <#else>
        <#assign startIndex=(pagination.pageNo-spaceOFStartIndexToPageNo)>
        <#assign isNeedStartMore=true>
    #if>

    <#if ((startIndex+spaceOFStartIndexToPageLinkCount) < pagination.totalCount)>
        <#assign endIndex=startIndex+spaceOFStartIndexToPageLinkCount>
        <#assign isNeedEndMore=true>
    <#else>
        <#assign endIndex=(pagination.totalCount)>
        <#assign isNeedEndMore=false>
    #if>

    <#if isNeedStartMore&&isShowMoreLI><li>...li>#if>
    <#list startIndex..endIndex as i>
        <#if pagination.pageNo != i>
            <li>
                <a href="${url+"?pageNo="+i}">${i}a>
            li>
        <#else>
            <li class="currentPage">
                <span>${i}span>
            li>
        #if>
    #list>
    <#if isNeedEndMore&&isShowMoreLI><li>...li>#if>
#macro>

<#--
	分页标签：用于显示数据分页链接。
	pagination：分页对象。
	url：链接地址
	showPageLinkCount:显示的页数链接数
	isShowMoreLI:是否显示“
...
”提示更多还有更多页数
	isNeedPageTo：是否显示转到指定页数的表单
-->
<#macro pager pagination url="#" showPageLinkCount=10 isShowMoreLI=true isNeedPageTo=true>
	<#if (pagination.totalCount)??>
		<#if (pagination.totalCount>1)>
			<#assign firstPageUrl=url+"?pageNo=1">
			<#assign prePageUrl=url+"?pageNo="+(pagination.pageNo-1)>
			<#assign nextPageUrl=url+"?pageNo="+(pagination.pageNo+1)>
			<#assign lastPageUrl=url+"?pageNo="+pagination.totalCount>
			
			

				

					<#if (pagination.pageNo>1)>
						首页
					<#else>
						首页
					
				
			
				

					<#if (pagination.pageNo>1)>
						上一页
					<#else>
						上一页
					
				
				
				<@outPutPageNo pagination=pagination url=url showPageLinkCount=showPageLinkCount isShowMoreLI=isShowMoreLI/>
		    
				

					<#if (pagination.pageNo
						下一页
					<#else>
						下一页
					
				
			
				

					<#if (pagination.pageNo
						尾页
					<#else>
						尾页
					
				
				
				

					共 ${pagination.totalCount} 页
				
				
				<#if isNeedPageTo>
					

						

							转到第  页
							
						
						
					
				
			
		
	


<#--
	输出分页链接。如果当前页超过 显示的页数链接数 的一半，则当前页居中显示。例如：当前第10页，总共20页，那么显示第6~第15页分页链接，且第10页居中。
	pagination：分页对象。
	url：链接地址
	showPageLinkCount:显示的页数链接数
	isShowMoreLI:是否显示“
...
”提示更多还有更多页数0
-->
<#macro outPutPageNo pagination url showPageLinkCount isShowMoreLI>
	<#--
		└────────────────────────────────────────────────┘
		A												              B
		
		└───────┴────────┘
		A1		PageNo	B1
		
		A->B:totalCount
		A1:startIndex
		B1:endIndex
		A1->B1:showPageLinkCount
		A1->PageNo:spaceOFStartIndexToPageNo
		A1->B1 -1:spaceOFStartIndexToPageLinkCount
	-->

	<#if (showPageLinkCount%2==1)>
		<#assign spaceOFStartIndexToPageNo=((showPageLinkCount+1)/2)-1>
	<#else>
		<#assign spaceOFStartIndexToPageNo=(showPageLinkCount/2)-1>
	
	
	<#assign spaceOFStartIndexToPageLinkCount=(showPageLinkCount-1)>
	
	<#if ((pagination.pageNo-spaceOFStartIndexToPageNo) <= 1) || (pagination.totalCount<=showPageLinkCount)>
		<#assign startIndex=1>
		<#assign isNeedStartMore=false>
	<#else>
		<#assign startIndex=(pagination.pageNo-spaceOFStartIndexToPageNo)>
		<#assign isNeedStartMore=true>
	
	
	<#if ((startIndex+spaceOFStartIndexToPageLinkCount) < pagination.totalCount)>
		<#assign endIndex=startIndex+spaceOFStartIndexToPageLinkCount>
		<#assign isNeedEndMore=true>
	<#else>
		<#assign endIndex=(pagination.totalCount)>
		<#assign isNeedEndMore=false>
	

	<#if isNeedStartMore&&isShowMoreLI>
...

	<#list startIndex..endIndex as i>
		<#if pagination.pageNo != i>
			

				${i}
			
		<#else>
			

				${i}
			
		
	
	<#if isNeedEndMore&&isShowMoreLI>
...

 

使用实例如下：

 

<#-- 分页标签 BEGIN -->
<#assign pagination = {"pageNo":10,"pageSize":10,"totalCount":20}>
<@pager paginationpagination=pagination url="list.htm"/>
<#-- 分页标签 END -->

				<#-- 分页标签 BEGIN -->
				<#assign pagination = {"pageNo":10,"pageSize":10,"totalCount":20}>
				<@pager pagination=pagination url="list.htm"/>
				<#-- 分页标签 END -->

 css代码如下：

 

/*分页控件*/
.pager{float: right; clear: both; margin-top: 5px;}
.pager li{line-height: 18px; display: block; float: left; padding: 0px 5px; margin: 0px 3px; font-size: 12px; border: 1px solid #cccccc;}
.pager li:hover{color: #ff9900; border: 1px solid #ff9900;}
.pager li:hover a{color: #ff9900;}
.pager li a{color: #464646;}
.pager li span{color: #cfcfcf;}
.pager li.currentPage{border: 1px solid #ff9900; background-color: #ff9900;}
.pager li.currentPage span{font-weight: bold; color: #ffffff;}
.pager li.pageInfo{color: #464646; border: none; background: none;}
.pager li.pageTo{height:20px; color: #464646; border: none; background: none;}
.pager li.pageTo input{line-height: 20px;}
.pager li.pageTo input.pageToNum{width: 20px; height: 18px; margin-top: 0px; border: 1px solid #cccccc; display:table-cell; vertical-align:top;}
.pager li.pageTo input.formButton {width: 40px; background: #F3F3F3;  height: 20px;}
.pager li.pageTo input.formButton:hover {background: #ff9900; color: #ffffff;}

/*分页控件*/
.pager{float: right; clear: both; margin-top: 5px;}
.pager li{line-height: 18px; display: block; float: left; padding: 0px 5px; margin: 0px 3px; font-size: 12px; border: 1px solid #cccccc;}
.pager li:hover{color: #ff9900; border: 1px solid #ff9900;}
.pager li:hover a{color: #ff9900;}
.pager li a{color: #464646;}
.pager li span{color: #cfcfcf;}
.pager li.currentPage{border: 1px solid #ff9900; background-color: #ff9900;}
.pager li.currentPage span{font-weight: bold; color: #ffffff;}
.pager li.pageInfo{color: #464646; border: none; background: none;}
.pager li.pageTo{height:20px; color: #464646; border: none; background: none;}
.pager li.pageTo input{line-height: 20px;}
.pager li.pageTo input.pageToNum{width: 20px; height: 18px; margin-top: 0px; border: 1px solid #cccccc; display:table-cell; vertical-align:top;}
.pager li.pageTo input.formButton {width: 40px; background: #F3F3F3;  height: 20px;}
.pager li.pageTo input.formButton:hover {background: #ff9900; color: #ffffff;}

 此外验证框架使用了formValidator.js,需要jquery支持。

• 验证框架js.rar (51.4 KB)
• 下载次数: 59