最近比较闲,想起来一直没时间做一个好点的分页效果。嗯马上做一个。分页都太熟悉了。以往用的分页都是比较常见的就是上一页,下一页,顶多再加个跳转到第几页。但是有没有好点的效果呢?因为现在一般都用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)" οnclick="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)" οnclick="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)" οnclick="pagination(${pages})"><span>${pages}</span></a> </#if> </#list> <#if (currentPage==4)> <a href="javascript:void(0)" οnclick="pagination(6)"><span>6</span></a> </#if> <span class="points">...</span> <a href="javascript:void(0)"οnclick="pagination(${totalPages})"><span>${totalPages}</span></a> <#elseif (currentPage>=5&¤tPage<(totalPages-3))> <a href="javascript:void(0)" οnclick="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)" οnclick="pagination(${pages})"><span>${pages}</span></a> </#if> </#list> <span class="points">...</span> <a href="javascript:void(0)" οnclick="pagination(${totalPages})"><span>${totalPages}</span></a> <#else> <a href="javascript:void(0)" οnclick="pagination('1')"><span>1</span></a> <span class="points">...</span> <#if (currentPage==totalPages-3)> <a href="javascript:void(0)" οnclick="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)" οnclick="pagination(${pages})"><span>${pages}</span></a> </#if> </#list> </#if> </#if> <#if (currentPage<totalPages)> <a href="javascript:void(0)" οnclick="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;" οnchange="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环境下