一篇简单读懂用springboot+bootstrap实现的分页查询
点击上方蓝色字体，选择“标星公众号”
优质文章，第一时间送达
1.业务说明
分页有物理分页和逻辑分页之分。物理分页是使用数据库本身提供的分页操作来完成数据查询，查询到的就是当前页的信息。例如mysql数据库可以使用limit，oracle数据库可以使用rownum来完成。逻辑分页是把数据库中所有的数据查询出来，再利用数据库中的游标来定位到某个页面。
物理分页的性能更好，但是不同数据库之间不通用。而逻辑分页的性能比较低，但是所有的数据库都能通用。而在一般的开发使用中，使用物理分页更加简单、便捷，在下面的案例中，我们也是使用物理分页。
本篇使用SpringBoot聚合工程+前端BootStrap框架作为实现
gitee项目链接: link.
2.业务实现
2.1.前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品信息分页查询</title>
<!--在线引用bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<p class="text-center font-weight-bold">商品信息分页查询</p>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">序号</th>
<th scope="col">姓名</th>
<th scope="col">代码</th>
<th scope="col">生产厂商</th>
<th scope="col">包装类型</th>
<th scope="col">价格</th>
<th scope="col">库存</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item" id="pre">
<a class="page-link" href="#">上一页</a>
</li>
<li class="page-item" id="next">
<a class="page-link" href="#">下一页</a>
</li>
<li>
<div class="alert alert-light" role="alert" id="text">
</div>
</li>
</ul>
</nav>
</div>
<script>
var pageno=1;
var pagesize=5;
var last;
var totalcount;
//改变table数据的函数
var initdata=function (merch) {
var html="";
for(var i=0;i<merch.length;i++){
html+="<tr>";
html+="<td>"+merch[i].id+"</td>";
html+="<td>"+merch[i].name+"</td>";
html+="<td>"+merch[i].code+"</td>";
html+="<td>"+merch[i].factory+"</td>";
html+="<td>"+merch[i].packaging+"</td>";
html+="<td>"+merch[i].price+"</td>";
html+="<td>"+merch[i].stock+"</td>";
html+="</tr>";
}
$("tbody").append(html);
}
//改变页码的函数
var change=function () {
$("#text").text("");
var str='当前第'+pageno+'页,'+'共'+totalcount+'条数据,'+'共'+last+'页';
$("#text").text(str);
}
//点击上一页、下一页的点击函数
var check=function () {
$.get("http://localhost:8080/findMerchByPage",{"pageno":pageno,"pagesize":pagesize},function (data) {
$("tbody").html("");
initdata(data.merchs);
},"json");
}
$("#pre a").click(function () {
if(pageno>1){
pageno=pageno-1;
check();
change();
}
});
$("#next a").click(function () {
if(pageno<last){
pageno=pageno+1;
check();
change();
}
});
//初始化数据函数
$(function () {
$.get("http://localhost:8080/findMerchByPage",{"pageno":pageno,"pagesize":pagesize},function (data) {
last=data.totalpage;
totalcount=data.totalcount;
initdata(data.merchs);
change();
},"json");
})
</script>
</div>
</body>
</html>
2.2.后端需要用到的pojo对象以及vo对象
pojo对象：负责封装数据库中的数据(这里别忘了Lombok依赖哦)
@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
@ToString
public class Merch {
private Integer id;
private String name;
private String packaging; //商品包装类型
private String factory; //厂家名称
private Double price; //价格
private String code; //代码
private Integer stock; //库存数
}
vo对象：负责封装数据库查询到属性，前端用来调用
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {
private int pageno;
private int pagesize;
private int totalpage;
private int totalcount;
private List<Merch> merchs;
}
2.3.后端业务
用mvc分层思想，先写controller层
/*
分页查询业务实现
*/
@RequestMapping("/findMerchByPage")
@ResponseBody
public EasyUITable findMerchByPage(int pageno,int pagesize) {
return merchService.findMerchByPage(pageno, pagesize);
}
具体业务写在service层(这里直接实现类哦)
@Override
public EasyUITable findMerchByPage(int pageno, int pagesize) {
int count = (pageno - 1)* pagesize;
List<Merch> merchs = merchDao.findMerchByPage(count,pagesize);
int totalcount = merchDao.findPage();
int totalpage = 0;
if (totalcount % pagesize == 0) {
totalpage = totalcount / pagesize;
}
else {
totalpage = totalcount/pagesize + 1;
}
EasyUITable easyUITable = new EasyUITable(pageno,pagesize,totalpage,totalcount,merchs);
return easyUITable;
}
dao层(mapper)层
// @Select("select * from student limit #{count},#{pagesize}")
List<Merch> findMerchByPage(int count, int pagesize);
//@Select("select count(*) from student")
int findPage();
或用xml的方式进行数据库操作
<!--分页查询-->
<select id="findMerchByPage" resultType="com.cy.pojo.Merch">
select * from merch limit #{count},#{pagesize}
</select>
<select id="findPage" resultType="int">
select count(*) from merch
</select>
3.最终效果图
完。如果对你有所帮助，请记得一件三连呀!（点赞也是可以的）
————————————————
版权声明：本文为CSDN博主「One_Piece111」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：
https://blog.csdn.net/One_Piece111/article/details/114594289
粉丝福利：Java从入门到入土学习路线图
👇👇👇
👆长按上方微信二维码 2 秒
感谢点赞支持下哈 
评论