一篇簡單讀懂用springboot+bootstrap實現(xiàn)的分頁查詢
點擊上方藍(lán)色字體，選擇“標(biāo)星公眾號”
優(yōu)質(zhì)文章，第一時間送達(dá)
1.業(yè)務(wù)說明
分頁有物理分頁和邏輯分頁之分。物理分頁是使用數(shù)據(jù)庫本身提供的分頁操作來完成數(shù)據(jù)查詢，查詢到的就是當(dāng)前頁的信息。例如mysql數(shù)據(jù)庫可以使用limit，oracle數(shù)據(jù)庫可以使用rownum來完成。邏輯分頁是把數(shù)據(jù)庫中所有的數(shù)據(jù)查詢出來，再利用數(shù)據(jù)庫中的游標(biāo)來定位到某個頁面。
物理分頁的性能更好，但是不同數(shù)據(jù)庫之間不通用。而邏輯分頁的性能比較低，但是所有的數(shù)據(jù)庫都能通用。而在一般的開發(fā)使用中，使用物理分頁更加簡單、便捷，在下面的案例中，我們也是使用物理分頁。
本篇使用SpringBoot聚合工程+前端BootStrap框架作為實現(xiàn)
gitee項目鏈接: link.
2.業(yè)務(wù)實現(xiàn)
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/[email protected]/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">生產(chǎn)廠商</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數(shù)據(jù)的函數(shù)
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);
}
//改變頁碼的函數(shù)
var change=function () {
$("#text").text("");
var str='當(dāng)前第'+pageno+'頁,'+'共'+totalcount+'條數(shù)據(jù),'+'共'+last+'頁';
$("#text").text(str);
}
//點擊上一頁、下一頁的點擊函數(shù)
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();
}
});
//初始化數(shù)據(jù)函數(shù)
$(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對象：負(fù)責(zé)封裝數(shù)據(jù)庫中的數(shù)據(jù)(這里別忘了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; //庫存數(shù)
}
vo對象：負(fù)責(zé)封裝數(shù)據(jù)庫查詢到屬性，前端用來調(diào)用
@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.后端業(yè)務(wù)
用mvc分層思想，先寫controller層
/*
分頁查詢業(yè)務(wù)實現(xiàn)
*/
@RequestMapping("/findMerchByPage")
@ResponseBody
public EasyUITable findMerchByPage(int pageno,int pagesize) {
return merchService.findMerchByPage(pageno, pagesize);
}
具體業(yè)務(wù)寫在service層(這里直接實現(xiàn)類哦)
@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的方式進(jìn)行數(shù)據(jù)庫操作
<!--分頁查詢-->
<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.最終效果圖
完。如果對你有所幫助，請記得一件三連呀!（點贊也是可以的）
————————————————
版權(quán)聲明：本文為CSDN博主「One_Piece111」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：
https://blog.csdn.net/One_Piece111/article/details/114594289
粉絲福利：Java從入門到入土學(xué)習(xí)路線圖
??????
??長按上方微信二維碼 2 秒
感謝點贊支持下哈 
評論
圖片
表情