freemarker+struts2仿QQ分页效果
最近比较闲，想起来一直没时间做一个好点的分页效果。嗯马上做一个。分页都太熟悉了。以往用的分页都是比较常见的就是上一页，下一页，顶多再加个跳转到第几页。但是有没有好点的效果呢？因为现在一般都用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;
}
}
StudentDB.java
package com.ht.db;
import java.util.ArrayList;
import java.util.List;
import com.ht.entity.Student;
/**
*
* @author ht
* 模拟DAO层，此处直接自定一个集合。实际中可用hibernate来分页
*/
public class StudentDB {
public List<Student> getAllStuList(){
List<Student> stuList=new ArrayList<Student>();
for(int i=1;i<102;i++){ //102条记录
Student s=new Student();
s.setStuId(i);
s.setStuName("ht,第"+i+"条记录");
stuList.add(s);
}
return stuList;
}
}
BasePage.java(封装分页信息)
package com.ht.util;
public class BasePage{
public static final Integer DEFAULT_CURRENT=1; //默认显示第一页
public static final Integer DEFAULT_PAGE_NUM=10;//默认显示10条记录
protected Integer pageFirRecord=0; //当前页第一条记录
protected Integer currentPage=1; //当前页数
protected Integer totalPages; //总页数
protected Integer totalRecord; //总记录数
protected Integer showRecordNum=DEFAULT_PAGE_NUM; //每页显示记录数
protected Integer showPageNum; //当前页显示的记录数量
protected Integer prePage=1;
protected Integer nexePage=1;
public BasePage(){
}
public BasePage(Integer currentPage,Integer totalRecord){
this.setTotalRecord(totalRecord);
this.setTotalPages();
this.setCurrentPage(currentPage);
this.setShowPageNum();
this.setPageFirRecord();
this.setPrePage();
this.setNexePage();
}
/**
* 重载
* @param currentPage
* @param totalRecord
* @param showRecordNum
*/
public BasePage(Integer currentPage,Integer totalRecord,int showRecordNum){
this.setTotalRecord(totalRecord);
this.setShowRecordNum(showRecordNum);
this.setTotalPages();
this.setCurrentPage(currentPage);
this.setShowPageNum();
this.setPageFirRecord();
this.setPrePage(); //计算前一页页码
this.setNexePage(); //计算下一页页码
}
public Integer getPrePage() {
return prePage;
}
public void setPrePage() {
this.prePage = currentPage-1;
}
public Integer getNexePage() {
return nexePage;
}
public void setNexePage() {
if(currentPage==totalPages){ //如果当前页码为总页码，即最后一页
this.nexePage = 0; //返回0
}else{
this.nexePage = currentPage+1;
}
if(totalPages==0){ //如果总页数为0，怎么返回0；
this.nexePage = 0;
}
}
public Integer getShowPageNum() {
return showPageNum;
}
public void setShowPageNum() { //当前页显示的记录数量
if(currentPage*showRecordNum-totalRecord>0){
this.showPageNum = totalRecord-(currentPage-1)*showRecordNum;
}else{
this.showPageNum=showRecordNum;
}
}
public Integer getShowRecordNum() {
return showRecordNum;
}
public void setShowRecordNum(Integer showRecordNum) {
if(showRecordNum==0){ //如果记录数为0，则默认为5
this.showRecordNum=5;
}else{
this.showRecordNum = showRecordNum;
}
}
public Integer getTotalPages() {
return totalPages;
}
public void setTotalPages() { //计算总页数
if(totalRecord%showRecordNum==0){
this.totalPages = totalRecord/showRecordNum;
}else{
this.totalPages = totalRecord/showRecordNum+1;
}
}
public Integer getTotalRecord() {
return totalRecord;
}
public void setTotalRecord(Integer totalRecord) {
this.totalRecord = totalRecord;
}
public Integer getCurrentPage() {
return currentPage;
}
public void setCurrentPage(Integer currentPage) {
if(currentPage==0||currentPage<0){
currentPage=1;
}
if(currentPage>totalPages&&totalPages!=0){ //2010年8月27日增加，
this.currentPage=totalPages; //当前页大于总页数时为总页数,并且保证不存在记录时不出错，即totalPages!=0
}else if(totalPages==0){
this.currentPage=1;
}else{
this.currentPage = currentPage;
}
}
public void setPageFirRecord() { //第一条记录所在集合的标号，比实际排数少一
this.pageFirRecord = (getCurrentPage()-1)*showRecordNum;
}
public Integer getPageFirRecord() {
return pageFirRecord;
}
}
PaginationService.java (模拟service层)
package com.ht.service;
import java.util.List;
import com.ht.db.StudentDB;
import com.ht.entity.Student;
import com.ht.util.BasePage;
public class PaginationService {
public BasePage getBasePage(int currentPage,int showRecordNum){
return new BasePage(currentPage,new StudentDB().getAllStuList().size(),showRecordNum);
}
public List<Student> getPageStuList(int firstRecord,int showRecordNum){
List<Student> stuAllList=new StudentDB().getAllStuList();
//java.util.List.subList(int fromIndex, int toIndex)截取集合中某一段
//注意：包括fromIndex,不包括toIndex
return stuAllList.subList(firstRecord, firstRecord+showRecordNum);
}
}
PaginationAction.java
package com.ht.action;
import java.util.List;
import com.ht.entity.Student;
import com.ht.service.PaginationService;
import com.ht.util.BasePage;
import com.opensymphony.xwork2.ActionSupport;
public class PaginationAction extends ActionSupport{
//前台传来的2个参数
private int currentPage; //当前页
private int showRecordNum; //每页显示记录数
//返回前台的2个参数
private List<Student> stuList; //当前页显示的学生集合
private int totalPages; //总页数
public String execute(){
PaginationService ps=new PaginationService(); //不用注入了，直接就new一个对象
BasePage bp=ps.getBasePage(currentPage, showRecordNum); //返回分页相关信息
currentPage=bp.getCurrentPage();
totalPages=bp.getTotalPages();
stuList=ps.getPageStuList(bp.getPageFirRecord(), bp.getShowPageNum());
return SUCCESS;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getTotalPages() {
return totalPages;
}
public void setTotalPages(int totalPages) {
this.totalPages = totalPages;
}
public List<Student> getStuList() {
return stuList;
}
public void setStuList(List<Student> stuList) {
this.stuList = stuList;
}
public int getShowRecordNum() {
return showRecordNum;
}
public void setShowRecordNum(int showRecordNum) {
this.showRecordNum = showRecordNum;
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
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环境下