仿Google的分页组件示例

其实这是个很简单的东东，工作之余(午休时)花了十几分钟做了下大致的效果(没有美工的艺术，所以效果不好)，做这个主要是因为此前跟同事聊天说到了他毕业论文中的实现类似的效果，于是我就瞎弄一下。先见代码，没有什么需要解释的：

/** * 仿Google的分页bean * 若在Web程序中要改造成Web版的 */ package com.labci.page.test; import java.util.ArrayList; import java.util.List; /** * @author Bill Tu * @since May 31, 2011(12:10:48 PM) * */ public class GooglePageBean { private int currentPageNo=1;//当前页，默认为第1页，实际程序中要动态传入此值 private int initSize=10;//当前页为第1页时显示的页数为10页 private int pageSize=20;//当前页若不为第1页时最长可显示20页 private int totalPage=100;//为了方便单元测试总页数先写死为100页做试验,实际上是按总记录数和每页大小来算的 @SuppressWarnings("unused") private boolean hasNext=false;//是否有下一页，默认没有 @SuppressWarnings("unused") private boolean hasPrev=false;//是否有上一页，默认没有 private int beginIndex=1;//默认从第1页开始 private int endIndex=10;//默认到第10页结束 private List<Integer> pageList=new ArrayList<Integer>(); /** * 打印页码 * @param pageNo 当前页 */ public GooglePageBean(int pageNo){ if(pageNo<1){ pageNo=1; } if(pageNo>totalPage){ pageNo=totalPage; } setCurrentPageNo(pageNo); if(totalPage<=initSize){ initSize=totalPage; beginIndex=1; endIndex=initSize; }else if(totalPage>initSize && totalPage<=pageSize){ pageSize=totalPage; beginIndex=1; int end=initSize+pageNo-1; if(totalPage<=end){ end=totalPage; } endIndex=end; }else if(totalPage>pageSize){ if(pageNo>initSize){ beginIndex=pageNo-initSize; int end=pageNo+initSize-1; if(totalPage<=end){ end=totalPage; } endIndex=end; while(endIndex-beginIndex+1<20){ beginIndex--; } }else{ beginIndex=1; endIndex=pageNo+initSize-1; } } for(int i=beginIndex;i<=endIndex;i++){ pageList.add(i); } } public int getCurrentPageNo() { return currentPageNo; } public void setCurrentPageNo(int currentPageNo) { this.currentPageNo = currentPageNo; } public int getInitSize() { return initSize; } public void setInitSize(int initSize) { this.initSize = initSize; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotalPage() { return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public boolean isHasNext() { return currentPageNo<totalPage?true:false; } public void setHasNext(boolean hasNext) { this.hasNext = hasNext; } public boolean isHasPrev() { return currentPageNo>1?true:false; } public void setHasPrev(boolean hasPrev) { this.hasPrev = hasPrev; } public int getBeginIndex() { return beginIndex; } public void setBeginIndex(int beginIndex) { this.beginIndex = beginIndex; } public int getEndIndex() { return endIndex; } public void setEndIndex(int endIndex) { this.endIndex = endIndex; } public List<Integer> getPageList() { return pageList; } }  

/** * GooglePageTest * 显示分页的简单示例 */ package com.labci.page.test; import java.util.List; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; /** * @author Bill Tu(tujiyue/iwtxokhtd) * May 31, 2011[8:54:00 PM] * */ public class ShowPageAction extends ActionSupport { /** * */ private static final long serialVersionUID = -5733035733228776913L; @Override public String execute() throws Exception { String pageNo=ServletActionContext.getRequest().getParameter("pageNo"); if(null==pageNo ||pageNo.length()<=0){ pageNo="1"; } int pageInt=Integer.parseInt(pageNo); GooglePageBean gpb=new GooglePageBean(pageInt); List<Integer> pageList=gpb.getPageList(); boolean hasPrev=gpb.isHasPrev(); boolean hasNext=gpb.isHasNext(); ServletActionContext.getRequest().setAttribute("pageNo", pageInt); ServletActionContext.getRequest().setAttribute("pageList", pageList); ServletActionContext.getRequest().setAttribute("hasPrev", hasPrev); ServletActionContext.getRequest().setAttribute("hasNext", hasNext); return SUCCESS; } }  

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <constant name="struts.action.extension" value="do" /> <constant name="struts.devMode" value="false" /> <package name="page" extends="struts-default"> <action name="list" class="com.labci.page.test.ShowPageAction"> <result name="success">list.jsp</result> </action> </package> </struts> 

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.do</url-pattern> </filter-mapping> </web-app>  

<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>首页</title> </head> <body> 简单地仿Google的分页组件示例，<a href="list.do" mce_href="list.do">进入查看效果</a> </body> </html>  

<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>分页示例</title> </head> <body> <c:choose> <c:when test="${!empty pageList}"> <tr> <c:if test="${hasPrev}"> <td> <img src="images/prev.jpg" mce_src="images/prev.jpg" title="上一页" οnclick="javascript:location.href='list.do?pageNo=${pageNo-1}'" style="cursor:hand;" mce_style="cursor:hand;"/> </td> </c:if> <td> <img src="images/g.jpg" mce_src="images/g.jpg"/> <c:forEach items="${pageList}" var="page"> <c:choose> <c:when test="${page==pageNo}"> <img src="images/red.jpg" mce_src="images/red.jpg" title="当前页"/> </c:when> <c:otherwise> <img src="images/yellow.jpg" mce_src="images/yellow.jpg" title="第${page}页" οnclick="javascript:location.href='list.do?pageNo=${page}'" style="cursor:hand;" mce_style="cursor:hand;"/> </c:otherwise> </c:choose> </c:forEach> <img src="images/end.jpg" mce_src="images/end.jpg"/> </td> <c:if test="${hasNext}"> <td> <img src="images/next.jpg" mce_src="images/next.jpg" title="下一页" οnclick="javascript:location.href='list.do?pageNo=${pageNo+1}'" style="cursor:hand;" mce_style="cursor:hand;"/> </td> </c:if> </tr> <br/> <tr> <c:if test="${hasPrev}"> <td>     <a href="list.do?pageNo=${pageNo-1}" mce_href="list.do?pageNo=${pageNo-1}">上一页</a> </td> </c:if> <td> <c:forEach items="${pageList}" var="page"> <c:choose> <c:when test="${page==pageNo}"> <b>${page}</b> </c:when> <c:otherwise> <a href="list.do?pageNo=${page}" mce_href="list.do?pageNo=${page}">${page}</a> </c:otherwise> </c:choose> </c:forEach> </td> <c:if test="${hasNext}"> <td> <a href="list.do?pageNo=${pageNo+1}" mce_href="list.do?pageNo=${pageNo+1}">下一页</a> </td> </c:if> </tr> </c:when> <c:otherwise> 没有数据记录! </c:otherwise> </c:choose> </body> </html>  

工程结构：

整体效果图加功能说明：

 

当前页为第1页时：

当前页为第2页时：

当前页为第10页时：

当前页为其它页时：

当然，还可以测试其它页，尤其是比较极端的情况，比如当总页数只有8页时，效果是否对等等，这里不再操作举例。

说明：本示例的总页数写死为100页(仅作示例)，实际中应根据总记录数和每页大小来求。