javaweb中实现分页，持续更新……

た入场券 2022-12-25 02:53 156阅读 0赞

![format_png][]

![format_png 1][]

大家好，欢迎来到雄雄的小课堂，昨天分享了个分页工具类[一个简单的分页工具类][Link 1]，其实，也是为今天的分享做的铺垫，今天，给大家带来的是javaweb实现分页的全过程！

前言：为什么需要分页？假设某大学有人数一万人，学生信息管理系统需要查询所有大学生的信息，那么就会将1w个学生的信息都查询的显示在页面中，管理员每次都需要不断的往下拖动页面才能浏览完所有学生信息，并且还容易看错行。有没有一种方法，既可以显示多条信息，又不用你拖动页面呢？答案当然是有的，那就是我们今天所有看的分页！

# 01 #

实现分页的方式

其实，实现分页的方式有好多种，一种是直接将需要查询的数据一次性查询出来，放在一个集合中，每次在集合中遍历出需要展示的数据即可。但是，这种方法是有缺点的，第一，看到的数据可能不是最新的，比如实时更新的数据（股票、外汇数据）肯定不能用这种方式。其次，如果数据库中有几万条数据的话，这么一次都查询出来往集合中扔，效率是非常低下的，耗时也很多。

第二种实现分页的方式就是，我们可以从数据库中查询我们每页所需要的数据，比如每页显示5条，那你就在数据库中查询5条，实时从数据库中查询，一来避免了数据库过大性能的问题，二来，由于每次都是从数据库中实时查询的，所以也就不会存在数据过期问题了。

**今天，我们就用第二种方式来实现分页。**

# 02 #

实现分页的步骤

1.确定页大小（每页显示的数据量）

这个其实很好理解，每页显示5条，就设置5条即可，每页显示10条，就设置10条，当然，这个每页显示的数据量也可以交给用户决定。

2.计算显示的总页数

有了每页显示的条数，在给你所有条数，你会不会算一共有多少页？就像一共有21个鸡蛋（总记录数）需要给篮子里面装，每个篮子最多只能放5（每页显示的数据量）个，那么你需要多少个篮子才能把21个鸡蛋都放完？怎么算？

21/5=4余1，余下来的这一个怎么办？当然是在找个篮子放进去，这样的话，我们就需要4+1个篮子。

数据也是这样的，如果有19条数据，每页显示5条，需要多少页？

19/5=3余4，那最后总页数就是3+1,4页！

思维转换到java中，代码如下：

**总页数 = 总记录数%页大小==0?总记录数/页大小: 总记录数/页大小+1;**

那有同学会问，老师，总记录数咋来的，你也没告诉我啊？总记录数我们只需要一条sql语句就搞定了，如下：

**Selct count(\*) from student;**

3.写分页的sql语句

目前我们就以mysql为例，mysql中分页的语法如下：

**Select \* from student limit 0,5;**

其中student为数据表0为偏移量，动态的，5为页大小，固定的。

假使我们取第一页数据，不需要便宜，那偏移量就是0，如果我们取第二页的数据，需要从第六条开始显示，需要越过第一页的1-5条数据，偏移量得从6开始，可以总结出一个规律，那就是：

**偏移量=（当前页-1）\*页大小**

例如，第三页的偏移量，即：(3-1)\*5=10;

今天我们就先看这些，明天将今天的理论知识运用到javaweb的代码中做一个具体的案例。

**往期精彩**

[一个简单的分页工具类][Link 1]

[2020-11-23][Link 1]

[![format_png 2][] ][Link 1]

[javaWeb中，如何通过Commons-FileUpload组件上传文件][javaWeb_Commons-FileUpload]

[2020-11-22][javaWeb_Commons-FileUpload]

[![format_png 3][] ][javaWeb_Commons-FileUpload]

[多功能语音播放器][Link 2]

[2020-11-21][Link 2]

[![format_png 4][] ][Link 2]

[CSS动画示例（上一篇是CSS过渡…）][CSS_CSS]

[2020-11-20][CSS_CSS]

[![format_png 5][] ][CSS_CSS]

[CSS3中的动画示例][CSS3]

[2020-11-19][CSS3]

[![format_png 6][] ][CSS3]

[CSS3的几个变形案例……][CSS3 1]

[2020-11-18][CSS3 1]

[![format_png 7][] ][CSS3 1]

![format_png 8][]

![format_png 9][]

点分享

![format_png 10][]

点点赞

![format_png 11][]

点在看

[format_png]: /images/20221120/c36fb3a686734f73b2452eef05c0e24e.png
[format_png 1]: /images/20221120/80dbff7905d7451ab057838dc8b20009.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe27ea0f86b6879527d4e7c4ca7816094295b359ebb1f3be57729b5f40c742745842c5876&idx=1&mid=2247497887&scene=21&sn=6f697ea2914c8772c2bfceda79b24ec5#wechat_redirect
[format_png 2]: /images/20221120/3d84439261df433c8339eead29156c2b.png
[javaWeb_Commons-FileUpload]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe267a0f86b7128e2ece4e35bcaa464cc817ead3a22a3528fd92a676e43620a252b8c89aa&idx=1&mid=2247497862&scene=21&sn=a65629591a983820fa90e75e0d675a48#wechat_redirect
[format_png 3]: /images/20221120/581e2b4ecd15467d9d7fce5357f8637b.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe28aa0f86b9c20a594d63a2f6c0a15ee7027739d18960c606d1e43a4bee319980513f1c3&idx=1&mid=2247497835&scene=21&sn=67a2f9d27acc11cd23395b5de7e2bc8f#wechat_redirect
[format_png 4]: /images/20221120/59337330dba746518e127bd05c44d7f2.png
[CSS_CSS]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe289a0f86b9f0b2ff8ce17691b88d99c6de88d57b02b29dcbf9f854e1a343488030ec25b&idx=1&mid=2247497832&scene=21&sn=f515b1f65f34ac208313eb00e3007e76#wechat_redirect
[format_png 5]: /images/20221120/51d9334607824b8db9b778fa09121ff4.png
[CSS3]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe2ada0f86bbb6bc7be61163512c6f1dd5dd1661df117d5b15c648098a166cb9d41c06eaa&idx=1&mid=2247497804&scene=21&sn=925b834f185cf286878c53b48762cb17#wechat_redirect
[format_png 6]: /images/20221120/411a326b5ec548b3a712baa9100992fe.png
[CSS3 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe2d3a0f86bc5c1f5f8a404e06a1531fadfbe7371736324f3c4cb9bca1d1d8fe933180ed9&idx=1&mid=2247497778&scene=21&sn=5d37f9031849c431b6162c6924ab3104#wechat_redirect
[format_png 7]: /images/20221120/94c205ee2b204baf8772d61781a79240.png
[format_png 8]: /images/20221120/428b8b2ef7314cb5bb3cdc36e95ab217.png
[format_png 9]: /images/20221120/81965f259efc47d58cee75636ef462b2.png
[format_png 10]: /images/20221120/8b788fde13f24a8fa4132af2f07e3448.png
[format_png 11]: /images/20221120/5f1e57ec1cb9429491952e3adc76bc8c.png