版权声明:Unruly https://blog.csdn.net/weixin_41660948/article/details/86758002
前言
虽然说现在目前很多主流的辅助框架可以帮我们完成分页,比如说后端的
pageHelper
、或者前端的Layui
可以帮我们完成进行分页。 但是有必要的时候我们需要去了解原生分页的步骤过程充实自己的内功。
原生分页的实现
一、MySQL分页公式:limit [起始偏移],[显示数量]
- 起始偏移从0开始,当只有一个参数时表示显示多少条数据。
- 使用场景 MySQL分页查询:
select * from table limit current,pageSize
MySQL分页公式:limit (起始偏移-1)* 显示数量,显示数量
二、用于展示的UI分页
- 配置一个泛型的分页工具用于保存数据。
- 页面可以通过EL表达式进行获取设置查询。
计算总页数的公式方式:
-
通过if判断计算
/* totalRecord -- 表示为总记录数 pageSize -- 表示为页面显示条数 totalPage -- 表示为页面的总页数 */ if(totalRecord % pageSize == 0){ totalPage = totalRecord / pageSize; }else{ tatalPage = totalRecord / pageSize + 1; }
-
通过Math方法进行计算
// ceil()表示向上取整,如果结果为整则取结果;相对的方法是floor() // 结果值为浮点类型,因此需要强制转换。 int totalPage = (int) Math.ceil(totalRecord/pageSize)
-
通过公式进行计算
this.totalPage = (totalRecord-1) / pageSize + 1;
泛型分页类如下:
public class PageTool<T> {
private int pageNum; // 当前页,通过请求传入。
private int pageSize; // 显示数,自己设置。
private int totalRecord;// 总记录数。查询数据库记录总数。
private List<T> results;// 结果集
private int totalPage; // 总页数
private int next; // 上一页
private int prev; // 下一页
public PageTool() {
}
public PageTool(int pageNum, int pageSize, int totalRecord) {
this.pageNum = pageNum;
this.pageSize = pageSize;
this.totalRecord = totalRecord;
this.totalPage = (totalRecord-1)/pageSize +1;
}
// 计算下一页
public int getNext() {
this.next = pageNum + 1;
if(next > totalPage){
next = totalPage;
}
return next;
}
// 计算上一页
public int getPrev() {
this.prev = pageNum - 1;
if(prev < 1){
prev = 1;
}
return prev;
}
// 计算总页数
public int getTotalPage() {
return (totalRecord-1) / pageSize + 1;
}
// ... 省略其他的get、set方法
}
控制处理分页回显
-
控制处理:将所有访问的数据存入model中,就相当于存入一次请求中
@RequestMapping("/index.html") public String goIndex(@RequestParam(value = "pageNum",required = false,defaultValue = "1") Integer pageNum, @RequestParam(value = "pageSize",required = false,defaultValue = "4") Integer pageSize, @RequestParam(value = "selectId",required = false,defaultValue = "0") Integer selectId, @RequestParam(value = "condition",required = false,defaultValue = "") String condition,Model model){ Books books = new Books(); if (selectId == 1) { books.setBookName(condition); } else if (selectId == 2) { books.setBookAuthor(condition); } else if (selectId == 3) { books.setBookPublish(condition); } // 查找初始默认值 List<Books> list = booksService.findList(books, pageNum, pageSize); // 设置当前页,设置每页显示数,设置总页数,设置结果集 PageTool<Books> page = new PageTool<>(pageNum,pageSize,booksService.findCount(books)); page.setResults(list); model.addAttribute("list", page); model.addAttribute("selectId",selectId); model.addAttribute("condition",condition); return "index"; }
-
数据回显 :通过EL表达式进行取值回显,第一次没有条件默认显示全部
<!-- 前端部分的代码 --> <div > <a href="#" onclick="doFirstPage(this)">首页</a> <a href="#" onclick="doPrevPage(this)">上一页</a> <a href="#" onclick="doNextPage(this)">下一页</a> <a href="#" onclick="doLastPage(this)">尾页</a> <span>第${list.pageNum}页/共${list.totalPage}页</span> </div> <script type="text/javascript"> function doFirstPage(obj){ obj.href = "${pageContext.request.contextPath}/index.html?pageNum=1&selectId=${selectId}&condition=${condition}"; } function doPrevPage(obj) { obj.href = "${pageContext.request.contextPath}/index.html?pageNum=${list.prev}&selectId=${selectId}&condition=${condition}"; } function doNextPage(obj){ obj.href = "${pageContext.request.contextPath}/index.html?pageNum=${list.next}&selectId=${selectId}&condition=${condition}"; } function doLastPage(obj) { obj.href = "${pageContext.request.contextPath}/index.html?pageNum=${list.totalPage}&selectId=${selectId}&condition=${condition}"; } </script>