一篇简单学会用springboot+bootstrap实现的分页查询

最新推荐文章于 2024-06-07 15:08:13 发布

One_Piece111

最新推荐文章于 2024-06-07 15:08:13 发布

阅读量1.3k

点赞数 7

分类专栏：应该没人会看文章标签： java 数据库 ajax spring boot bootstrap

本文链接：https://blog.csdn.net/One_Piece111/article/details/114594289

版权

应该没人会看专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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 merch limit #{count},#{pagesize}")
	List<Merch> findMerchByPage(int count, int pagesize);
	//@Select("select count(*) from merch")
    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.最终效果图

在这里插入图片描述
完。如果对你有所帮助，请记得一件三连呀!（点赞也是可以的）

One_Piece111

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
5
评论
一篇简单学会用springboot+bootstrap实现的分页查询

1.业务说明分页有物理分页和逻辑分页之分。物理分页是使用数据库本身提供的分页操作来完成数据查询，查询到的就是当前页的信息。例如mysql数据库可以使用limit，oracle数据库可以使用rownum来完成。逻辑分页是把数据库中所有的数据查询出来，再利用数据库中的游标来定位到某个页面。物理分页的性能更好，但是不同数据库之间不通用。而逻辑分页的性能比较低，但是所有的数据库都能通用。而在一般的开发使用中，使用物理分页更加简单、便捷，在下面的案例中，我们也是使用物理分页。本篇使用SpringBoot聚合工程
复制链接

扫一扫

专栏目录