发表一个自己常用的分页的通用代码,实现了ajax分页。此例子是在Struts2+Hibernate+Spring框架下实现的,分页工具类是通用的,只不过查询、控制是根据使用的方法的不同而不同。
?
PaginationUtil.java
package com.dsh.pagination.tool; /** * ajax分页 * @author: DuanLang * @company:oddTech * @time:2011-12-2 上午11:10:36 */ public class PaginationUtil { /** 设置当前页码 */ private int curPage = 1; /** 设置每一页的行数 */ private int pageSize = 15; /** 从数据库读取的开始记录数 */ private int start; /** 从数据库读取的行数(每一页显示的记录数) */ private int pageCount; /** 总共行数(记录数) */ private int totalRow; /** 总共页数 */ private int totalPage; /** 分页导航条 */ private String pageBar; /** * * 根据从数据库读出的总记录数初始化相应的分页变量 * * @param totalRow * 总记录数 */ public void setPagesVariable(int totalRow) { this.setTotalRow(totalRow); this.setTotalPage(totalRow / pageSize); if (totalRow % pageSize > 0) { this.setTotalPage(totalPage + 1); } if (curPage > 1) { this.setStart((curPage - 1) * pageSize); } else { this.setStart(0); } this.setPageCount(pageSize); } /** * * @return the curPage */ public int getCurPage() { return curPage; } /** * * @param curPage * * the curPage to set */ public void setCurPage(int curPage) { this.curPage = curPage; } /** * * @return the pageSize */ public int getPageSize() { return pageSize; } /** * * @param pageSize * * the pageSize to set */ public void setPageSize(int pageSize) { this.pageSize = pageSize; } /** * * @return the start */ public int getStart() { return start; } /** * * @param start * * the start to set */ public void setStart(int start) { this.start = start; } /** * * @return the pageCount */ public int getPageCount() { return pageCount; } /** * * @param pageCount * the pageCount to set */ public void setPageCount(int pageCount) { this.pageCount = pageCount; } /** * * @return the totalRow */ public int getTotalRow() { return totalRow; } /** * * @param totalRow * * the totalRow to set */ public void setTotalRow(int totalRow) { this.totalRow = totalRow; } /** * * @return the totalPage */ public int getTotalPage() { return totalPage; } /** * * @param totalPage * * the totalPage to set */ public void setTotalPage(int totalPage) { this.totalPage = totalPage; } /** * * @return the pageBar */ public String getPageBar() { return pageBar; } /** * * @param pageBar * * the pageBar to set */ public void setPageBar(String pageBar) { this.pageBar = pageBar; } /** * * 分页导航条(显示分页链接控制代码) * * @return */ public String getToolsMenu() { StringBuffer str = new StringBuffer(""); int next, prev; prev = curPage - 1; next = curPage + 1; if (curPage > 1) { str.append("<a href=\"#\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=1;this.parentNode.submit();\">首页</a> "); } else { str.append("首页 "); } if (curPage > 1) { str.append("<a href=\"#\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=" + prev + ";this.parentNode.submit();\">上页</a> "); } else { str.append("上页</a> "); } if (curPage < totalPage) { str.append("<a href=\"#\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=" + next + ";this.parentNode.submit();\">下页</a> "); } else { str.append("下页 "); } if (totalPage > 1 && curPage != totalPage) { str.append("<a href=\"#\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=" + totalPage + ";this.parentNode.submit();\">末页</a> "); } else { str.append("末页 "); } str.append(" 共" + totalRow + "条记录"); str.append(" 每页<SELECT size=\"1\" name=\"page.pageSize\" onchange=\"this.form.getElementsByTagName('input')[0].value=1;this.form.submit();\">"); if (pageSize == 2) { str.append("<OPTION value=2 selected>2</OPTION>"); } else { str.append("<OPTION value=2>2</OPTION>"); } if (pageSize == 5) { str.append("<OPTION value=5 selected>5</OPTION>"); } else { str.append("<OPTION value=5>5</OPTION>"); } if (pageSize == 10) { str.append("<OPTION value=10 selected>10</OPTION>"); } else { str.append("<OPTION value=10>10</OPTION>"); } if (pageSize == 15) { str.append("<OPTION value=15 selected>15</OPTION>"); } else { str.append("<OPTION value=15>15</OPTION>"); } if (pageSize == 20) { str.append("<OPTION value=20 selected>20</OPTION>"); } else { str.append("<OPTION value=20>20</OPTION>"); } if (pageSize == 50) { str.append("<OPTION value=50 selected>50</OPTION>"); } else { str.append("<OPTION value=50>50</OPTION>"); } if (pageSize == 100) { str.append("<OPTION value=100 selected>100</OPTION>"); } else { str.append("<OPTION value=100>100</OPTION>"); } str.append("</SELECT>"); str.append("条 分" + totalPage + "页显示 转到"); str.append("<SELECT size=\"1\" name=\"Pagelist\" onchange=\"this.form.getElementsByTagName('input')[0].value=this.value;this.form.submit();\">"); for (int i = 1; i < totalPage + 1; i++) { if (i == curPage) { str.append("<OPTION value=" + i + " selected>" + i + "</OPTION>"); } else { str.append("<OPTION value=" + i + ">" + i + "</OPTION>"); } } str.append("</SELECT>页"); str.append("<INPUT type=\"hidden\" value=" + curPage + " name=\"page.curPage\" > "); return str.toString(); } /** * * AJAX分页导航条(显示分页链接控制代码) * * @return */ public String getAJAXToolsMenu() { StringBuffer str = new StringBuffer(""); int next, prev; prev = curPage - 1; next = curPage + 1; str.append("<span class=\"showControlPage\">"); if (curPage > 1) { str.append("<a href=\"javascript:\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=1;showPages(this.parentNode.getElementsByTagName('input')[0].value,this.parentNode.getElementsByTagName('select')[0].value);\">首页</a> "); } else { str.append("首页 "); } if (curPage > 1) { str.append("<a href=\"javascript:\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=" + prev + ";showPages(this.parentNode.getElementsByTagName('input')[0].value,this.parentNode.getElementsByTagName('select')[0].value);\">上页</a> "); } else { str.append("上页</a> "); } if (curPage < totalPage) { str.append("<a href=\"javascript:\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=" + next + ";showPages(this.parentNode.getElementsByTagName('input')[0].value,this.parentNode.getElementsByTagName('select')[0].value);\">下页</a> "); } else { str.append("下页 "); } if (totalPage > 1 && curPage != totalPage) { str.append("<a href=\"javascript:\" onclick=\"this.parentNode.getElementsByTagName('input')[0].value=" + totalPage + ";showPages(this.parentNode.getElementsByTagName('input')[0].value,this.parentNode.getElementsByTagName('select')[0].value);\">末页</a> "); } else { str.append("末页 "); } str.append(" 共" + totalRow + "条记录"); str.append(" 每页<SELECT size=\"1\" name=\"page.pageSize\" onchange=\"this.parentNode.getElementsByTagName('input')[0].value=1;showPages(1,this.value);\">"); if (pageSize == 2) { str.append("<OPTION value=2 selected>2</OPTION>"); } else { str.append("<OPTION value=2>2</OPTION>"); } if (pageSize == 5) { str.append("<OPTION value=5 selected>5</OPTION>"); } else { str.append("<OPTION value=5>5</OPTION>"); } if (pageSize == 10) { str.append("<OPTION value=10 selected>10</OPTION>"); } else { str.append("<OPTION value=10>10</OPTION>"); } if (pageSize == 15) { str.append("<OPTION value=15 selected>15</OPTION>"); } else { str.append("<OPTION value=15>15</OPTION>"); } if (pageSize == 20) { str.append("<OPTION value=20 selected>20</OPTION>"); } else { str.append("<OPTION value=20>20</OPTION>"); } if (pageSize == 50) { str.append("<OPTION value=50 selected>50</OPTION>"); } else { str.append("<OPTION value=50>50</OPTION>"); } if (pageSize == 100) { str.append("<OPTION value=100 selected>100</OPTION>"); } else { str.append("<OPTION value=100>100</OPTION>"); } str.append("</SELECT>"); str.append("条 分" + totalPage + "页显示 转到"); str.append("<SELECT size=\"1\" name=\"Pagelist\" onchange=\"this.parentNode.getElementsByTagName('input')[0].value=this.value;showPages(this.value,this.parentNode.getElementsByTagName('select')[0].value);\">"); for (int i = 1; i < totalPage + 1; i++) { if (i == curPage) { str.append("<OPTION value=" + i + " selected>" + i + "</OPTION>"); } else { str.append("<OPTION value=" + i + ">" + i + "</OPTION>"); } } str.append("</SELECT>页"); str.append("<INPUT type=\"hidden\" value=" + curPage + " name=\"page.curPage\" > "); str.append("</span>"); return str.toString(); } /* * (non-Javadoc) * * @see java.lang.Object#toString() */ @Override public String toString() { return "PageUtil [curPage=" + curPage + ", pageSize=" + pageSize + ", start=" + start + ", pageCount=" + pageCount + ", totalRow=" + totalRow + ", totalPage=" + totalPage + "]"; } }
?这个是实现根据分页的信息(查询起始标号、要查询的记录的条数)来从数据库中读取信息。
UserDaoImpl.java
package com.dsh.pagination.dao.impl; import java.util.List; import java.util.Map; import org.hibernate.Query; import org.springframework.orm.hibernate3.support.HibernateDaoSupport; import com.dsh.pagination.dao.UserDao; public class UserDaoImpl extends HibernateDaoSupport implements UserDao { @Override public List getUserByPageInfo(Map<String, Integer> pageMap) { Query query=this.getSession().createQuery("from User"); query.setFirstResult(pageMap.get("start"));//设置数据查询的开始位置 query.setMaxResults(pageMap.get("pageCount")); //设置查询的条数 return query.list(); } @Override public int getAllUserNum() { Query query=this.getSession().createQuery("select count(u.id) as number from User u"); int num=((Number)query.iterate().next()).intValue(); return num; } }
?Service层就不贴出来了,基本上和Dao层差不多。下面贴出控制层代码,负责从前台获取分页的信息,和向前台发送从数据库中查询出的信息,传送是以json格式进行的。
?
UserActionImpl.java
package com.dsh.pagination.action.impl; import java.util.HashMap; import java.util.List; import java.util.Map; import org.apache.struts2.json.annotations.JSON; import com.dsh.pagination.action.UserAction; import com.dsh.pagination.model.User; import com.dsh.pagination.service.UserService; import com.dsh.pagination.tool.JsonUtil; import com.dsh.pagination.tool.PaginationUtil; import com.opensymphony.xwork2.ActionSupport; public class UserActionImpl extends ActionSupport implements UserAction { /** * */ private static final long serialVersionUID = 1L; private UserService us; private List<User> list; private PaginationUtil pageUtil; private String pageBar; private String users; @Override public String getUserByPageInfo() { System.out.println(pageUtil.getPageSize()+"从前台获取的数据"); int num = this.us.getUserNum(); System.out.println(num+"这是数据库中用户的个数"); pageUtil.setPagesVariable(num); this.pageBar = pageUtil.getAJAXToolsMenu(); Map<String, Integer> pageInfo = new HashMap<String, Integer>(); pageInfo.put("start", pageUtil.getStart());// 设置数据查询的开始位置 pageInfo.put("pageCount", pageUtil.getPageCount());// 设置查询的数据条数 list = us.getUserByPageInfo(pageInfo);// 去业务层获取数据 if (list.size() > 0) { this.users=JsonUtil.listToJson(list); return SUCCESS; } return ERROR; } @JSON(serialize=false) public UserService getUs() { return us; } public void setUs(UserService us) { this.us = us; } @JSON(serialize=false) public List<User> getList() { return list; } public void setList(List<User> list) { this.list = list; } @JSON(serialize=false) public PaginationUtil getPageUtil() { return pageUtil; } public void setPageUtil(PaginationUtil pageUtil) { this.pageUtil = pageUtil; } @JSON(name="pageBar") public String getPageBar() { return pageBar; } public void setPageBar(String pageBar) { this.pageBar = pageBar; } @JSON(name="users") public String getUsers() { return users; } public void setUsers(String users) { this.users = users; } }
?在前台我们就可以通过如下的方式进行调用了
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>java通用分页显示数据</title> <script type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript"> var curPage = 1, pageSize = 10; $(function() { dataInfoList(); }); function dataInfoList() { submitData = "pageUtil.curPage=" + curPage + "&pageUtil.pageSize=" + pageSize; $.ajax({ //一个Ajax过程 type : "post", //以post方式与后台沟通 url : "getUserByPageInfoAction.action", //与此页面沟通 dataType : "json",//返回的值以 html方式 解释 data :submitData, beforeSend : function(XMLHttpRequest) { $("#loadingMessage") .html( " <img src=\"/html/images/loading.gif\"><span>请稍后,数据加载中!</span>"); $("#loadingMessage").css({ display : "" }); }, success : function(data) {//如果调用成功 var users=eval('('+data.users+')'); alert(users[0].id); /* for(i in users){ $("#site_list").html(user[i].id); } */ $("#loadingMessage").css({ display : "none" }); $("#pageBar").html(data.pageBar); }, error : function() { $("#loadingMessage").css({ display : "" }); $("#loadingMessage") .html( "<span class=\"errorFont\">数据加载遇到错误,请稍后再试</span>"); } }); } function showPages(curPageUser, pageSizeUser) { curPage = curPageUser; pageSize = pageSizeUser; dataInfoList(); } </script> </head> <body> <div id="site_list"> </div> <div class="showControlPage"></div> <div id="loadingMessage"></div> <div id="pageBar"></div> </body> </html>
?简单的效果如下所示,我的数据库中并没用任何数据,所以效果只能显示成这样了。
?
?
首页?上页?下页?末页?? 共20条记录 每页2 5 10 15 20 50 100条 分2页显示 转到1 2页
?