分页简介
分页功能在网页中是非常常见的一个功能,其作用也就是将数据分割成多个页面来进行显示。
- 使用场景: 当取到的数据量达到一定的时候,就需要使用分页来进行数据分割。
当我们不使用分页功能的时候,会面临许多的问题:
- 客户端的问题: 如果数据量太多,都显示在同一个页面的话,会因为页面太长严重影响到用户的体验,也不便于操作,也会出现加载太慢的问题。
- 服务端的问题: 如果数据量太多,可能会造成内存溢出,而且一次请求携带的数据太多,对服务器的性能也是一个考验。
分页的分类
分页的实现分为真分页和假分页两种,也就是物理分页和逻辑分页。
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”>
-
</c:forEach>
- 所以写完看起来会是这样子的:
-
«
-
‹
<c:forEach begin=“0” end=“${page.totalPage-1}” varStatus=“status”>
-
</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-NhRLDaLD-1714872940875)]
[外链图片转存中…(img-7ygtk3zg-1714872940876)]
[外链图片转存中…(img-hQgzLHu4-1714872940876)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!