史上最简单的 SpringBoot+BootStrap+JPA+Page 实现前后端分离的分页查询

最新推荐文章于 2025-06-10 09:48:50 发布

置顶

程序猿丶HLK

最新推荐文章于 2025-06-10 09:48:50 发布

阅读量5.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： springboot 文章标签：分页 springboot JPA分页

本文链接：https://blog.youkuaiyun.com/weixin_39971186/article/details/90032099

本文介绍了如何使用SpringBoot、JPA和Bootstrap实现前后端分离的分页查询。首先，前端通过引入静态资源并设置bootstrap-table元素及属性，结合JQuery初始化分页功能。然后，后端在SpringBoot项目中添加JPA依赖，创建Controller和服务类，利用Page分页插件处理分页请求。注意，SpringBoot的Page分页默认从0开始。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前端界面调整

前端处理步骤：

第一步：引入对应js和css静态资源

<!-- 引入css样式 -->
<link rel="stylesheet" href="/css/bootstrap-table.min.css">
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- 引入js静态脚本 -->
<script type="text/javascript" src="/jquery/jquery-2.1.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrap-table.js"></script>
<script type="text/javascript" src="/js/bootstrap-table-zh-CN.min.js"></script>

js和css静态资源下载链接：https://pan.baidu.com/s/1PQZmm09LEfWXo1A7Scq-LQ 提取码：z3d5

第二步：在body标签内需要分页的地方加入bootstrap-table元素

<table class="table" id="mytable" border="1" style="width: auto;margin: 0px auto;table-layout:fixed;"></table>

第三步：使用JQuery代码初始化bootstrap-table元素，修改自己需要显示的对应的属性名

//初始化表格及分页
    function initTable() {
        $('#mytable').bootstrapTable('destroy');
        $("#mytable").boot

最低0.47元/天解锁文章

200万优质内容无限畅学