首先说明: 这里分页是使用了SSM框架+ jsp 来做的, 当然分页还有其他的很多做法, 比如easyUI自带的分页效果. 但是这些原理都是很相似的, 再次只做为学习总结之用.

一, 效果图

这里的截图是来自百度, 当然我们的项目也是做成这种效果, 当点击第10页时, 相应页码数也要发生相应变化.

二, 代码实例

1, 首先我们在项目中加入了一个page 的jar包, 这个jar包有3个java文件组成, 这个jar包是事先写好的通用分页插件.

另外这里将源码也写上来:

Paginable.java:

View Code

SimplePage.java:

View Code

Pagination.java:

View Code

2, 下面源码就是需要自己在项目中构建

下面开始从Controller(babasport-console)-->ServiceImpl(babasport-product)-->DaoMapper(babasport-dao)-->jsp展示

Controller层:

BrandController.java:

复制代码

1 package cn.itcast.core.controller;2 3 import java.util.List;4 5 import org.springframework.beans.factory.annotation.Autowired;6 import org.springframework.stereotype.Controller;7 import org.springframework.ui.Model;8 import org.springframework.web.bind.annotation.RequestMapping;9 10 import cn.itcast.common.page.Pagination;11 import cn.itcast.core.bean.product.Brand;12 import cn.itcast.core.service.product.BrandService;13 14 /

15 品牌16 */17 @Controller18 @RequestMapping(value="/brand")19 public class BrandController { 20 21 @Autowired22 private BrandService brandService;23 24 @RequestMapping(value="/list.do")25 public String list(Integer pageNo, String name, Integer isDisplay, Model model){ 26 //List<Brand> brands = brandService.selectBrandListByQuery(name, isDisplay);27 Pagination pagination = brandService.selectPaginationByQuery(pageNo, name, isDisplay);28 model.addAttribute("pagination", pagination);29 //回显查询条件30 model.addAttribute("name", name);31 if(isDisplay != null){ 32 model.addAttribute("isDisplay", isDisplay);33 }else{ 34 model.addAttribute("isDisplay", 1);35 }36 return "brand/list";37 }38 39 @RequestMapping(value="/toEdit.do")40 public String selectBrandById(Long id, Model model){ 41 42 Brand brand = brandService.selectBrandById(id);43 model.addAttribute("brand", brand);44 45 return "brand/edit";46 }47 }复制代码解析: 这个controller 包括两个方法, 一个是查询分页数据, 另一个是根据ID 回显数据.两个方法都很简单, 第一个就是根据页面传递过来的当前页数和查询条件通过service层去做进一步处理后再通过Dao层去查询结果, 将查询的结果返回后再封装到Model里面, 然后转发到视图层.第二个方法更简单了, 通过Id查询到相应的商品然后回显数据即可.

Service层:

BrandServiceImpl.java:

复制代码

1 package cn.itcast.core.service.product;2 3 import java.util.List;4 5 import org.springframework.beans.factory.annotation.Autowired;6 import org.springframework.stereotype.Service;7 import org.springframework.transaction.annotation.Transactional;8 9 import cn.itcast.common.page.Pagination;10 import cn.itcast.core.bean.product.Brand;11 import cn.itcast.core.bean.product.BrandQuery;12 import cn.itcast.core.dao.product.BrandDao;13 @Service("brandService")14 @Transactional15 public class BrandServiceImpl implements BrandService { 16 17 @Autowired18 private BrandDao brandDao;19 20 @Override21 public List<Brand> selectBrandListByQuery(String name, Integer isDisplay) { 22 BrandQuery brandQuery = new BrandQuery();23 if (name != null) { 24 brandQuery.setName(name);25 }26 if (isDisplay != null) { 27 brandQuery.setIsDisplay(isDisplay);28 }29 else { 30 //是: 1, 否:031 brandQuery.setIsDisplay(1);32 }33 34 return brandDao.selectBrandListByQuery(brandQuery);35 }36 37 //分页38 public Pagination selectPaginationByQuery(Integer pageNo, String name, Integer isDisplay) { 39 BrandQuery brandQuery = new BrandQuery();40 //设置当前页 cpn方法: 如果pageNumber 是null或者 小于1, 那么就将pageNumber设置为1, 如果不是则使用传递进来的pageNumber41 brandQuery.setPageNo(Pagination.cpn(pageNo));42 //设置每页数43 brandQuery.setPageSize(3);44 45 //拼接条件46 StringBuilder sb = new StringBuilder();47 48 if (name != null) { 49 brandQuery.setName(name);50 sb.append("name=").append(name);51 }52 53 if (isDisplay != null) { 54 brandQuery.setIsDisplay(isDisplay);55 sb.append("&isDisplay=").append(isDisplay);56 }57 else { 58 //是: 1, 否:059 brandQuery.setIsDisplay(1);60 sb.append("&isDisplay=").append(1);61 }62 //构建分页对象63 //三个参数: 当前页,每页显示行数,总记录数64 Pagination pagination = new Pagination(brandQuery.getPageNo(), brandQuery.getPageSize(), brandDao.selectCount(brandQuery));65 //查询结果集66 //使用查询语句: select from bbs_brand where ... limit (pageNumber - 1) 3, 367 pagination.setList(brandDao.selectBrandListByQuery(brandQuery));68 69 //分页在页面显示 /brand/list.do?name=aaa&&isDisplay=070 String url = "/brand/list.do";71 pagination.pageView(url, sb.toString());72 73 return pagination;74 }75 76 //通过ID查询一个品牌77 public Brand selectBrandById(Long id){ 78 return brandDao.selectBrandById(id);79 }80 81 }复制代码解析: Service层中主要来说第二个分页的方法.1 brandQuery.setPageNo(Pagination.cpn(pageNo)); 这个cpn方法是Pagination中封装好的静态方法, 我们来看下源码:

复制代码

1 /*

2 检查页码 checkPageNo3

4 @param pageNo5 @return if pageNo==null or pageNo<1 then return 1 else return pageNo

6 /7 public static int cpn(Integer pageNo) { 8 return (pageNo == null || pageNo < 1) ? 1 : pageNo;9 }复制代码使用StringBuilder 封装查询条件, 因为当我们根据查询条件查询到的数据也有分页效果时, 这时候我们点击页码的按钮时跳转到相应的页数后, 查询条件也应该回显.1 //构建分页对象2 //三个参数: 当前页,每页显示行数,总记录数3 Pagination pagination = new Pagination(brandQuery.getPageNo(), brandQuery.getPageSize(), brandDao.selectCount(brandQuery));4 //查询结果集5 //使用查询语句: select from bbs_brand where ... limit (pageNumber - 1) 3, 36 pagination.setList(brandDao.selectBrandListByQuery(brandQuery));7 8 //分页在页面显示 /brand/list.do?name=aaa&&isDisplay=09 String url = "/brand/list.do";10 pagination.pageView(url, sb.toString());构建分页对象, 将查询的结果封装到pagination中, 且 将url和封装的条件封装到pageView中. 这里因为页码按钮的样式是固定的, 不固定的只是我们点击 每一个按钮跳转的url和查询的条件不同, 所以这里使用pageView属性来封装url和查询条件.

Dao层:

BrandDao.xml:

复制代码

1 <?xml version="1.0" encoding="UTF-8" ?> 2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" ";3 4 <mapper namespace="cn.itcast.core.dao.product.BrandDao">5 6 <resultMap type="Brand" id="brand">7 <result column="img_url" property="imgUrl"/>8 <result column="is_display" property="isDisplay"/>9 </resultMap>10 <!-- 查询品牌结果集 List<Brand> -->11 <select id="selectBrandListByQuery" parameterType="BrandQuery" resultMap="brand">12 select id ,name,description,img_url,is_display,sort13 from bbs_brand14 <where>15 <if test="name != null">16 name like "%"#{name}"%"17 </if>18 <if test="isDisplay != null">19 and is_display = #{isDisplay}20 </if>21 </where>22 <if test="startRow != null">23 limit #{startRow}, #{pageSize}24 </if>25 </select>26 27 <!-- 查询品牌结果集 List<Brand> -->28 <select id="selectCount" parameterType="BrandQuery" resultType="Integer">29 select count(1)30 from bbs_brand31 <where>32 <if test="name != null">33 name like "%"#{name}"%"34 </if>35 <if test="isDisplay != null">36 and is_display = #{isDisplay}37 </if>38 </where>39 </select>40 41 <!-- 根据ID查询 -->42 <select id="selectBrandById" parameterType="Long" resultMap="brand">43 select id ,name,description,img_url,is_display,sort44 from bbs_brand45 <where>46 id = #{id}47 </where>48 </select>49 </mapper>复制代码ModelBrandQuery.java:

复制代码

1 package cn.itcast.core.bean.product;2 3 import java.io.Serializable;4 5 public class BrandQuery implements Serializable{ 6 /*

7 默认的ID8 /

9 private static final long serialVersionUID = 1L;

10

11 //品牌ID bigint

12 private Long id;

13 //品牌名称

14 private String name;

15 //描述

16 private String description;

17 //图片URL

18 private String imgUrl;

19 //排序 越大越靠前

20 private Integer sort;

21 //是否可用 0 不可用 1 可用

22 private Integer isDisplay;//is_display

23 public Long getId() {

24 return id;

25 }

26 public void setId(Long id) {

27 this.id = id;

28 }

29 public String getName() {

30 return name;

31 }

32 public void setName(String name) {

33 this.name = name;

34 }

35 public String getDescription() {

36 return description;

37 }

38 public void setDescription(String description) {

39 this.description = description;

40 }

41 public String getImgUrl() {

42 return imgUrl;

43 }

44 public void setImgUrl(String imgUrl) {

45 this.imgUrl = imgUrl;

46 }

47 public Integer getSort() {

48 return sort;

49 }

50 public void setSort(Integer sort) {

51 this.sort = sort;

52 }

53 public Integer getIsDisplay() {

54 return isDisplay;

55 }

56 public void setIsDisplay(Integer isDisplay) {

57 this.isDisplay = isDisplay;

58 }

59 public static long getSerialversionuid() {

60 return serialVersionUID;

61 }

62 @Override

63 public String toString() {

64 return "Brand [id=" + id + ", name=" + name + ", description=" + description + ", imgUrl=" + imgUrl + ", sort="

65 + sort + ", isDisplay=" + isDisplay + "]";

66 }

67

68 //附加字段

69 //当前页

70 private Integer pageNo = 1;

71

72 //每页数

73 private Integer pageSize = 10;

74

75 //开始行

76 private Integer startRow;

77 public Integer getPageNo() {

78 return pageNo;

79 }

80 public void setPageNo(Integer pageNo) {

81 //计算开始行

82 this.startRow = (pageNo - 1)pageSize;83 this.pageNo = pageNo;84 }85 public Integer getPageSize() { 86 return pageSize;87 }88 public void setPageSize(Integer pageSize) { 89 //计算开始行90 this.startRow = (pageNo - 1)*pageSize;91 this.pageSize = pageSize;92 }93 public Integer getStartRow() { 94 return startRow;95 }96 public void setStartRow(Integer startRow) { 97 this.startRow = startRow;98 }99 100 101 }复制代码解析: mapper和model这里model这接计算好了startRow, 所以在mapper就可以直接查询了.

复制代码

1 //附加字段2 //当前页3 private Integer pageNo = 1;4 5 //每页数6 private Integer pageSize = 10;7 8 //开始行9 private Integer startRow;10 public Integer getPageNo() { 11 return pageNo;12 }13 public void setPageNo(Integer pageNo) { 14 //计算开始行15 this.startRow = (pageNo - 1)pageSize;

16 this.pageNo = pageNo;

17 }

18 public Integer getPageSize() {

19 return pageSize;

20 }

21 public void setPageSize(Integer pageSize) {

22 //计算开始行

23 this.startRow = (pageNo - 1)pageSize;24 this.pageSize = pageSize;25 }26 public Integer getStartRow() { 27 return startRow;28 }29 public void setStartRow(Integer startRow) { 30 this.startRow = startRow;31 }复制代码

View层:

list.jsp:

复制代码

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>2 <%@ include file="../head.jsp" %>3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";4 <html xmlns=";5 <head>6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>7 <title>babasport-list</title>8 </head>9 <body>10 <div class="box-positon">11 <div class="rpos">当前位置: 品牌管理 - 列表</div>12 <form class="ropt">13 <input class="add" type="button" value="添加" οnclick="javascript:window.location.href='add.jsp'"/>14 </form>15 <div class="clear"></div>16 </div>17 <div class="body-box">18 <form action="/brand/list.do" method="post" style="padding-top:5px;">19 品牌名称: <input type="text" name="name" value="${name}"/>20 <select name="isDisplay"> 21 <option value="1" <c:if test="${isDisplay==1 }">selected="selected"</c:if>>是</option>22 <option value="0" <c:if test="${isDisplay==0 }">selected="selected"</c:if>>否</option>23 </select>24 <input type="submit" class="query" value="查询"/>25 </form>26 <table cellspacing="1" cellpadding="0" border="0" width="100%" class="pn-ltable">27 <thead class="pn-lthead">28 <tr>29 <th width="20"><input type="checkbox" οnclick="checkBox('ids',this.checked)"/></th>30 <th>品牌ID</th>31 <th>品牌名称</th>32 <th>品牌图片</th>33 <th>品牌描述</th>34 <th>排序</th>35 <th>是否可用</th>36 <th>操作选项</th>37 </tr>38 </thead>39 <tbody class="pn-ltbody">40 <c:forEach items="${pagination.list }" var="brand">41 <tr bgcolor="#ffffff" οnmοuseοut="this.bgColor='#ffffff'" οnmοuseοver="this.bgColor='#eeeeee'">42 <td><input type="checkbox" value="${brand.id }" name="ids"/></td>43 <td align="center">${brand.id }</td>44 <td align="center">${brand.name }</td>45 <td align="center"><img width="40" height="40" src="/images/pic/ppp.jpg"/></td>46 <td align="center"></td>47 <td align="center">${brand.sort}</td>48 <td align="center">49 <c:if test="${brand.isDisplay == 1 }">是</c:if>50 <c:if test="${brand.isDisplay == 0 }">否</c:if>51 </td>52 <td align="center">53 <a class="pn-opt" href="/brand/toEdit.do?id=${brand.id}">修改</a> | <a class="pn-opt" οnclick="if(!confirm('您确定删除吗？')) {return false;}" href="#">删除</a>54 </td>55 </tr>56 57 </c:forEach>58 59 </tbody>60 </table>61 <div class="page pb15">62 <span class="r inb_a page_b">63 <c:forEach items="${pagination.pageView }" var="page">64 ${page }65 </c:forEach>66 </span>67 </div>68 <div style="margin-top:15px;"><input class="del-button" type="button" value="删除" οnclick="optDelete();"/></div>69 </div>70 </body>71 </html>复制代码解析: 这里需要添加一些必要的说明: 这里 在显示分页页码的时候直接使用了 ${page}, 到底这个是怎么实现的呢? 下面来看下源码中的pageView.

复制代码

1 /*

2 分页显示样示部分3 */4 public void pageView(String url,String params){ 5 6 pageView = new ArrayList<String>();7 8 if(this.pageNo != 1){ 9 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo=1'\"><font size=2>首页</font></a>");10 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.pageNo-1)+"'\"><font size=2>上一页</font></a>");11 }else{ 12 pageView.add("<font size=2>首页</font>");13 pageView.add("<font size=2>上一页</font>");14 }15 16 if(this.getTotalPage() <= 10){ 17 for (int i = 0; i < this.getTotalPage(); i++) { 18 if((i+1)==this.pageNo){ 19 pageView.add("<strong>"+this.pageNo+"</strong>");20 i = i+1;21 if(this.pageNo==this.getTotalPage())break;22 }23 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(i+1)+"'\">"+(i+1)+"</a>");24 }25 }else if(this.getTotalPage() <= 20){ 26 //没有把...加上27 int l = 0;28 int r = 0;29 if(this.pageNo<5){ 30 l=this.pageNo-1;31 r=10-l-1;32 }else if(this.getTotalPage()-this.pageNo<5){ 33 r=this.getTotalPage()-this.pageNo;34 l=10-1-r;35 }else{ 36 l=4;37 r=5;38 }39 int tmp = this.pageNo-l;40 for (int i = tmp; i < tmp+10; i++) { 41 if(i==this.pageNo){ 42 pageView.add("<strong>"+this.pageNo+"</strong>");43 i = i+1;44 if(this.pageNo==this.getTotalPage()) break;45 }46 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(i)+"'\">"+(i)+"</a>");47 }48 49 }else if(this.pageNo<7){ 50 for (int i = 0; i < 8; i++) { 51 if(i+1==this.pageNo){ 52 pageView.add("<strong>"+this.pageNo+"</strong>");53 i = i+1;54 }55 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(i+1)+"'\">"+(i+1)+"</a>");56 }57 pageView.add("...");58 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.getTotalPage()-1)+"'\">"+(this.getTotalPage()-1)+"</a>");59 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.getTotalPage())+"'\">"+(this.getTotalPage())+"</a>");60 }else if(this.pageNo>this.getTotalPage()-6){ 61 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(1)+"'\">"+(1)+"</a>");62 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(2)+"'\">"+(2)+"</a>");63 pageView.add("...");64 for (int i = this.getTotalPage()-8; i <this.getTotalPage() ; i++) { 65 if(i+1==this.pageNo){ 66 pageView.add("<strong>"+this.pageNo+"</strong>");67 i = i+1;68 if(this.pageNo==this.getTotalPage()) break;69 }70 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(i+1)+"'\">"+(i+1)+"</a>");71 }72 }else{ 73 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(1)+"'\">"+(1)+"</a>");74 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(2)+"'\">"+(2)+"</a>");75 pageView.add("...");76 77 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.pageNo-2)+"'\">"+(this.pageNo-2)+"</a>");78 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.pageNo-1)+"'\">"+(this.pageNo-1)+"</a>");79 pageView.add("<strong>"+this.pageNo+"</strong>");80 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.pageNo+1)+"'\">"+(this.pageNo+1)+"</a>");81 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.pageNo+2)+"'\">"+(this.pageNo+2)+"</a>");82 83 pageView.add("...");84 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.getTotalPage()-1)+"'\">"+(this.getTotalPage()-1)+"</a>");85 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.getTotalPage())+"'\">"+(this.getTotalPage())+"</a>");86 } 87 if(this.pageNo != this.getTotalPage()){ 88 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+(this.pageNo+1)+"'\"><font size=2>下一页</font></a>");89 pageView.add("<a href=\"javascript:void(0);\" οnclick=\"javascript:window.location.href='" + url + "?" + params + "&pageNo="+this.getTotalPage()+"'\"><font size=2>尾页</font></a>");90 } else{ 91 pageView.add("<font size=2>下一页</font>");92 pageView.add("<font size=2>尾页</font>");93 }94 pageView.add("共<var>" + getTotalPage() + "</var>页 到第<input type='text' id='PAGENO' size='3' />页 <input type='button' id='skip' class='hand btn60x20' value='确定' οnclick=\"javascript:window.location.href = '" + url + "?" + params + "&pageNo=' + $('#PAGENO').val() \"/>");95 }复制代码这里是直接将展示页拼接了出来, 而且加了url和查询参数.

到了这里整个分页的流程就搞完了, 下面来看下整体效果: