预览文章: freemarker+struts2仿QQ分页效果

时间：2010-10-15 来源：hellotommy

最近比较闲，想起来一直没时间做一个好点的分页效果。嗯马上做一个。分页都太熟悉了。以往用的分页都是比较常见的就是上一页，下一页，顶多再加个跳转到第几页。但是有没有好点的效果呢？因为现在一般都用strut2，为了有很好的通用性，首先想到的自然是strut2的自定义标签。于是马上google一下。果然，一大堆。不过由于小弟资历浅薄，也没心思看，主要是strut2的标签本来我就觉得不大习惯，另外上个月接触了freemarker后，实在是用的爽死了，为什么不用freemarker的macro指令写个通用的分页呢？马上想到模仿TX的http://comment5.news.qq.com/comment.htm?site=news&id=26293038

现在一般用ssh+freemarker，就模仿这个形式吧。

主要文件：

common-pagination.ftl 通用分页

paginationShow.ftl 分页效果展示

pagination.css 分页效果css（直接用ff扣下来的。HOHO）

jquery-1.3.2.min.js jq的load方法我喜欢。类似ajax的效果

onOver.png 鼠标移上去时候的效果

jar包就是strut2的基本的那几个就可以了，当然freemarker那个别忘记了

common-pagination.ftl

<#macro pagination>
<div class="common-pagination">
        <#if (currentPage>1)>
        <a href="javascript:void(0)" onclick="pagination(${currentPage}-1)" class="enable"><span>上一页</span></a>
    <#else>
        <a class="disable"><span>上一页</span></a>
    </#if>   
    <#if (totalPages<9)>               <#-->总页数小于9的情况每页都显示 <-->
        <#list 1..(totalPages) as pages>
                <#if (pages==currentPage)>        <#-->如果是当前页 <-->
                        <a class="current"><span>${currentPage}</span></a>
                <#else>
                        <a href="javascript:void(0)" onclick="pagination(${pages})"><span>${pages}</span></a>
                </#if>
        </#list>
    <#else>
        <#if (currentPage<5)>
                <#list 1..5 as pages>
                        
                        <#if (pages==currentPage)>
                                <a class="current"><span>${currentPage}</span></a>
                        <#else>
                                <a href="javascript:void(0)" onclick="pagination(${pages})"><span>${pages}</span></a>
                        </#if>
                        
                </#list>
                
                <#if (currentPage==4)>
                        <a href="javascript:void(0)" onclick="pagination(6)"><span>6</span></a>
                </#if>
                
                <span class="points">...</span>     
                <a href="javascript:void(0)"onclick="pagination(${totalPages})"><span>${totalPages}</span></a>
                
        <#elseif (currentPage>=5&¤tPage<(totalPages-3))>
                <a href="javascript:void(0)" onclick="pagination('1')"><span>1</span></a>
                <span class="points">...</span>     
                <#list (currentPage-2)..(currentPage+2) as pages>
                        <#if (pages==currentPage)>
                                <a class="current"><span>${currentPage}</span></a>
                        <#else>
                                <a href="javascript:void(0)" onclick="pagination(${pages})"><span>${pages}</span></a>
                        </#if>
                </#list>
                <span class="points">...</span>     
                <a href="javascript:void(0)" onclick="pagination(${totalPages})"><span>${totalPages}</span></a>
        <#else>
                <a href="javascript:void(0)" onclick="pagination('1')"><span>1</span></a>
                <span class="points">...</span>     
                <#if (currentPage==totalPages-3)>
                        <a href="javascript:void(0)" onclick="pagination(${currentPage}-3)"><span>${currentPage-2}</span></a>
                </#if>
                <#list (totalPages-4)..(totalPages) as pages>
                        <#if (pages==currentPage)>
                                <a class="current"><span>${currentPage}</span></a>
                        <#else>
                                <a href="javascript:void(0)" onclick="pagination(${pages})"><span>${pages}</span></a>
                        </#if>
                        </#list>
        </#if>
    </#if>        
    <#if (currentPage<totalPages)>
        <a href="javascript:void(0)" onclick="pagination(${currentPage}+1)" class="enable"><span>下一页</span></a>
    <#else>
        <a class="disable"><span>下一页</span></a>
    </#if>
    <div>
 </#macro>

paginationShow.ftl

<#import "common-pagination.ftl" as allBase>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>仿QQ分页效果</title>
        <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
                <link href="css/pagination.css" rel="stylesheet" type="text/css" media="screen"> 
        <script type="text/javascript">
                function setRecordNum(obj){                             //设置每页显示记录数
                        var showRecordNum=obj.value;
                        $("#show").load("paginationAction.action",{
                                sendTime:(new Date()).getTime(),
                                showRecordNum:showRecordNum
                        });
                }
                
                function pagination(currentPage){               //分页，实际应用中当然需要加入必要的参数的。
                        var currentPage=currentPage;
                        var showRecordNum=$("#showRecordNum").val();
                        $("#show").load("paginationAction.action",{
                                sendTime : (new Date()).getTime(),
                                currentPage:currentPage,
                                showRecordNum:showRecordNum
                        });
                }
        </script>
        
  </head>
 
  
  <body>
   
  
  <div id="show">
  <@allBase.pagination></@allBase.pagination>
   <br/>
    <table>
        <tr>
                <th>学生学号</th>
                <th>学生姓名</th>
        </tr>
        <#list stuList as sl>
        <tr>
                <td>${sl.stuId}</td>
                <td>${sl.stuName}</td>
        
        </tr>
        </#list>
        
    </table>
  </div>
  
  
        <#assign currentRecord=showRecordNum>
         每页显示记录数：
        <select id="showRecordNum" style="width:50px;" onchange="return setRecordNum(this)">
        <option <#if currentRecord==5> selected="selected"  </#if> value="5">5条</option>
        <option <#if currentRecord==10> selected="selected" </#if> value="10">10条</option>
        <option <#if currentRecord==15> selected="selected" </#if> value="15">15条</option>
        <option <#if currentRecord==20> selected="selected" </#if> value="20">20条</option>
    </select>
  </body>
</html>

Student.java(作为model吧)

package com.ht.entity;

public class Student {
        private int stuId;
        private String stuName;
        public int getStuId() {
                return stuId;
        }
        public void setStuId(int stuId) {
                this.stuId = stuId;
        }
        public String getStuName() {
                return stuName;
        }
        public void setStuName(String stuName) {
                this.stuName = stuName;
        }
        
}

pagination.css

body{
    font:12px/1.75 "宋体",arial,sans-serif;

}
/*common-pagination*/        //分页的css
.common-pagination {
    width:auto;
    float:right;
    padding-top:8px;
    margin-right:10px;
    display:inline
}
.common-pagination a{
    float:left;
    height:21px;
    background:url(../image/onOver.png) left top no-repeat; 
    padding-left:6px; 
    color:#000;
    line-height:21px;
    margin-left:3px;
    display:inline;
    font-family:"Arial"; 
    text-decoration:none;
    text-align:center
    
}
.common-pagination a span {
    display:inline-block; 
    height:21px; 
    line-height:21px; 
    background:url(../image/onOver.png) right top no-repeat; 
    padding-right:6px;
    font-family:"Arial";
}
.common-pagination a.sm { 
    padding-left:4px; 
    margin-left:2px
}
.common-pagination a span.sm {
    padding:0 4px 0 0;
}
.common-pagination a.disable {
    cursor:auto;
    font-family:"宋体";
    color:#C4C4C4;
}
.common-pagination a.enable {
    font-family:"宋体";
}
.common-pagination a:hover,.common-pagination a.current {
    background:url(../image/onOver.png) left bottom no-repeat;
    color:#fff;
    text-decoration:none;
    cursor:pointer
}
.common-pagination a:hover span,.common-pagination a.current span {
    background:url(../image/onOver.png) right bottom no-repeat;
}
.common-pagination a.disable:hover {
    background:url(../image/onOver.png) left top no-repeat;
    color:#C4C4C4;
}
.common-pagination a.disable:hover span { 
    background:url(../image/onOver.png) right top no-repeat;
}
.common-pagination span.points {
    float:left;
    line-height:11px;
    padding:5px 6px;
    margin-left:3px;
    display:inline;
    font-family:"Arial"; 
    text-align:center;
    border:0px;
    color:#000;
} 
.common-pagination span.sm {
    padding:4px 4px; 
    margin-left:2px
}

OK.以上就是主要的几个配置。

在实际应用中只需要在ftl中引用common-pagination.ftl页面就可以啦。

当然2个js方法必须改过，毕竟不传参数的情况比较少见，直接在load方法里添加必要的参数就OK了

下面这个是完整的项目。myeclipse8.5环境下，下载完整原项目：

http://hellotommy.javaeye.com/admin/blogs/785242