Java Web分页功能详解

分页简介

---

分页功能在网页中是非常常见的一个功能，其作用也就是将数据分割成多个页面来进行显示。

• 使用场景： 当取到的数据量达到一定的时候，就需要使用分页来进行数据分割。

当我们不使用分页功能的时候，会面临许多的问题：

• 客户端的问题： 如果数据量太多，都显示在同一个页面的话，会因为页面太长严重影响到用户的体验，也不便于操作，也会出现加载太慢的问题。

• 服务端的问题： 如果数据量太多，可能会造成内存溢出，而且一次请求携带的数据太多，对服务器的性能也是一个考验。

---

分页的分类

分页的实现分为真分页和假分页两种，也就是物理分页和逻辑分页。

1.真分页（物理分页）：

• 实现原理： SELECT * FROM xxx [WHERE...] LIMIT #{param1}, #{param2}

第一个参数是开始数据的索引位置  

第二个参数是要查询多少条数据

• 优点： 不会造成内存溢出

• 缺点： 翻页的速度比较慢

2.假分页（逻辑分页）：

• 实现原理： 一次性将所有的数据查询出来放在内存之中，每次需要查询的时候就直接从内存之中去取出相应索引区间的数据

• 优点： 分页的速度比较快

• 缺点： 可能造成内存溢出

---

传统的分页方式

---

对于假分页的实现方式很简单，只需要准备一个集合保存从数据库中取出的所有数据，然后根据当前页面的码数，取出对应范围的数据显示就好了，我们这里基于物理分页来实现。

分页的原理

• 页面中的数据有：

结果集：通过 SQL 语句查询得来的——**List**

• 分页条中的数据有：

当前页：用户传递到后台——**currentPage**  

总页数：计算的来——**totalPage**  

上一页：计算的来——**prePage**  

下一页：计算的来——**nextPage**  

尾页：计算的来（总页数）——**lastPage**  

页面大小（即每一页显示的条数）：用户传递到后台——**count**  

总条数：通过 SQL 语句查询得来的——**totalCount**

可以发现页面功能中需要用到的数据有两个是需要通过 SQL 语句查询得来的：一个是页面中显示的数据 List ，另一个是数据的总条数 totalCount，分别对应以下两条 SQL 语句：

• SELECT * FROM student LIMIT #{param1}, #{param2}

• SELECT COUNT(*) FROM student

通过计算得到的数据有：

• 总页数：totalPage

总页数 = 总条数 % 页面大小 == 0 ? 总条数 / 页面大小 : 总条数 / 页面大小 + 1

• 上一页：prePage

上一页 = 当前页 - 1 > = 1 ? 当前页 - 1 : 1

• 下一页：nextPage

下一页 = 当前页 + 1 <= totalPage ? 当前页 + 1 : totalPage

• 尾页：lastPage

尾页 = 总条数 % 页面大小 == 0 ？ 总条数 - 页面大小 : 总条数 - 总条数 % 页面大小

用户传递的数据：

• 当前页：currentPage

• 页面大小：count

---

所有我们可以创建一个 Page 工具类备用：

public class Page {

int start; // 开始数据的索引

int count; // 每一页的数量

int total; // 总共的数据量

/**

• 提供一个构造方法

• @param start

• @param count

*/

public Page(int start, int count) {

super();

this.start = start;

this.count = count;

}

/**

• 判断是否有上一页

• @return

*/

public boolean isHasPreviouse(){

if(start==0)

return false;

return true;

}

/**

• 判断是否有下一页

• @return

*/

public boolean isHasNext(){

if(start==getLast())

return false;

return true;

}

/**

• 计算得到总页数

• @return

*/

public int getTotalPage(){

int totalPage;

// 假设总数是50，是能够被5整除的，那么就有10页

if (0 == total % count)

totalPage = total /count;

// 假设总数是51，不能够被5整除的，那么就有11页

else

totalPage = total / count + 1;

if(0==totalPage)

totalPage = 1;

return totalPage;

}

/**

• 计算得到尾页

• @return

*/

public int getLast(){

int last;

// 假设总数是50，是能够被5整除的，那么最后一页的开始就是45

if (0 == total % count)

last = total - count;

// 假设总数是51，不能够被5整除的，那么最后一页的开始就是50

else

last = total - total % count;

last = last<0?0:last;

return last;

}

/* getter and setter */

}

---

前台实现分页设计

---

首先我们在前台需要完成我们分页条的设计，这里可以直接引入 Bootstrap 来完成：

上面是使用 Bootstrap 实现一个分页条的简单例子，如果不熟悉的童鞋可以去菜鸟教程中查看：点这里

---

简单版本的分页条

为了便于理解，我们先来实现一个简单版本的分页条吧：

• 首页超链：指向了 start 为 0 的首页

• «

  • 上一页超链：

• ‹

  • 下一页超链：

• ›

  • 最后一页超链：指向了最后一页

• »

  • 中间页：

  <c:forEach begin=“0” end=“${page.totalPage-1}” varStatus=“status”>

• ${status.count}

  </c:forEach>

  • 所以写完看起来会是这样子的：

• «

• ‹

  <c:forEach begin=“0” end=“${page.totalPage-1}” varStatus=“status”>

• ${status.count}

  </c:forEach>

• ›

• »

  • 存在的问题：

  ① 没有边界判断，即在首页仍然可以点击前一页，不符合逻辑也影响用户体验

  ② 会显示完所有的分页，即如果 totalPage 有50页，那么分页栏将会显得特别长，影响体验

  ---

  改良版本的分页条

  1.写好头和尾

  …

  2.写好« ‹这两个功能按钮

  使用 <c:if>标签来增加边界判断，如果没有前面的页码了则设置为disable状态

  «

  ‹

  再通过 JavaScrip 代码来完成禁用功能：

  3.完成中间页码的编写

  <c:forEach begin=“0” end=“${page.totalPage-1}” varStatus=“status”>

  <c:if test=“${status.countpage.count-page.start<=30 && status.countpage.count-page.start>=-10}”>

  <a

  href=“?page.start=${status.index*page.count}”

  <c:if test=“${status.index*page.count==page.start}”>class=“current”</c:if>

  ${status.count}

  </c:if>

  </c:forEach>

  从 0 循环到 page.totalPage - 1 ，varStatus 相当于是循环变量

  • status.count 是从1开始遍历

  • status.index 是从0开始遍历

  • **要求：**显示当前页码的前两个和后两个就可，例如当前页码为3的时候，就显示 1 2 3(当前页) 4 5 的页码

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  个和后两个就可，例如当前页码为3的时候，就显示 1 2 3(当前页) 4 5 的页码

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-uec3MINR-1715462727039)]

  [外链图片转存中…(img-9S524lhs-1715462727039)]

  [外链图片转存中…(img-eGElq5Gk-1715462727040)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！