模仿百度分頁

1、css樣式

/*分頁 begin*/
.page_list{width:75%;margin:5% auto;}
.page_list a{ text-decoration: none;font-size:75%;color:#666; display: block;float: left;width:46px;height:46px;line-height:46px;
    margin-right: 10px;text-align: center;background-color: #fff;border:1px solid #dedede;}
.page_list a.top_page,.page_list a.end_page{width:62px;}
.page_list a.page_prev,.page_list a.page_next{width:76px;}
.page_list span.page_ellipsis{display: block;float: left;width:46px;height:46px;margin-right: 10px;background-position:5px -88px;border:none;}
.page_list a:hover ,.page_list a.current{background-color: #dedede;color:#333;}
/*分頁 end*/
 

2、自定義標籤

<#-- 引數說明：pageNo當前的頁碼，totalPage總頁數， showPages顯示的頁碼個數，callFunName回撥方法名（需在js中自己定義）-->
<#macro page pageNo totalPage showPages callFunName>
	<div class="page_list clearfix">
		<#if pageNo!=1>
        <a href="javascript:${callFunName+'('+1+')'};" class="top_page">首頁</a>
        <a href="javascript:${callFunName+'('+(pageNo-1)+')'};" class="page_prev">上一頁</a>
        </#if>
        <#if pageNo-showPages/2 gt 0>
        	<#assign start = pageNo-(showPages-1)/2/>
        	<#if showPages gt totalPage>
        		<#assign start = 1/>
        	</#if>
        <#else>
        	<#assign start = 1/>
        </#if>
        <#if totalPage gt showPages>
        	<#assign end = (start+showPages-1)/>
        	<#if end gt totalPage>
        		<#assign start = totalPage-showPages+1/>
        		<#assign end = totalPage/>
        	</#if>
        <#else>
        	<#assign end = totalPage/>
        </#if>
        <#assign pages=start..end/>
        <#list pages as page>
        	<#if page==pageNo>
        		<a href="javascript:${callFunName+'('+page+')'};" class="current">${page}</a>
        	<#else>
        		<a href="javascript:${callFunName+'('+page+')'};">${page}</a>
        	</#if>
        </#list>
		<#if pageNo!=totalPage>
        	<a href="javascript:${callFunName+'('+(pageNo+1)+')'};" class="page_next">下一頁</a>
        	<a href="javascript:${callFunName+'('+totalPage+')'};" class="end_page">尾頁</a>
        </#if>
    </div>
</#macro>
 

3、頁面中呼叫

<!-- 匯入自定義ftl -->
<#import "/ftl/cast.ftl" as cast/>
<!-- 使用該標籤 -->
<@cast.page pageNo=12 totalPage=30 showPages=9 callFunName="alert"/>