Springboot搭配PageHelper实现分页查询_springboot pagehelp - wpsshop博客
devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Springboot搭配PageHelper实现分页查询_springboot pagehelp

作者：盐析白兔 | 2024-06-05 14:58:22

赞

踩

springboot pagehelp

最近遇到个需要将前端页面展示数据进行分页处理；

最开始想的是从controller中返回所有数据到前端thymleaf页面，然后利用js来实现分页的数据展示

后来一想，这样不够“科学”，如果数据量过大的话，对页面的相应速度肯定有影响，于是还是搜了个插件来进行分页查询数据，再利用ajax传回前端页面。

这个插件就是：PageHelper是Mybaits的一个分页插件

在这里记录下怎么使用，有了插件对这些小功能开发的填补，让开发的确很方便！

1.首先导入依赖、进行配置

  1.         <dependency>
  2.             <groupId>com.github.pagehelper</groupId>
  3.             <artifactId>pagehelper-spring-boot-starter</artifactId>
  4.             <!-- 特别注意版本问题 -->
  5.             <version>1.2.3</version>
  6.         </dependency>

在yml或者properties文件中进行相关配置

  1. pagehelper:
  2.   helper-dialect: mysql
  3.   reasonable: true
  4.   support-methods-arguments: true

helper-dialect：配置使用哪种数据库语言，不配置的话pageHelper也会自动检测

reasonable：配置分页参数合理化功能，默认是false。

true：开启的话，如果pageNum<1会查询第一页，

如果pageNum>总页数会查询最后一页；

false：关闭的话，如果pageNum<1或pageNum>总页数会返回空数据。

support-methods-arguments：支持通过Mapper接口参数来传递分页参数，默认值false，分页插件会从查询方法的参数值中，自动根据上面 params 配置的字段中取值，查找到合适的值时就会自动分页。

2.定义查询对应数据方法的接口与对应的sql

我这里的需求是查询数据库里面，特定状态的文件。

我这里用的mybatis与mysql进行交互的，再xml文件里写好要查询数据的sql语句。

注意：sql语句末尾不要写分号-->“；”,否则执行的时候会报sql语法错误！

 因为PageHelper的实现原理大概：是对mybatis执行sql语句的方法拦截，再添加上相关的分页语句，来达到分页查询的目的。加上分号；会导致sql语句扩展失败。

3.在实现类中定义分页查询方法

  1.     public PageInfo<FileStateInfo> getFileWatingByPages(int pageNum, int pageSize) {
  2.         // TODO Auto-generated method stub
  3.         PageHelper.startPage(pageNum, pageSize);
  4.         List<FileStateInfo> lists = fileStateMapper.getFileWating();
  5.         PageInfo<FileStateInfo> pageInfo = new PageInfo<FileStateInfo>(lists);
  6.         return pageInfo;
  7.     }

返回的类型是PageInfo类型；

pageNum：当前要查询第几页的数据；

pageSize：每一页有多少条数据；

List<FileStateInfo> lists = fileStateMapper.getFileWating();->mybatis查询出所要的所有数据

把查询出的所有数据交给PageHelper插件的PageInfo类来进行分页的封装；

点击进去大概看下PageInfo类的结构，便可以知道，可以返回给我们哪些数据

在页面console.log()一下，可以看到返回了很多描述性的信息。按需求，各取所取需的信息即可。

 

 4.在controller中调用分页方法

  1.     @ResponseBody
  2.     @RequestMapping(value = "/getFileWatingByPages",method = RequestMethod.GET)
  3.     public List<FileStateInfo> getFileWating(@RequestParam("pageNumber") String pageNumber){
  4.         int number = Integer.parseInt(pageNumber);
  5.         PageInfo<FileStateInfo> pageInfo = fileState.getFileWatingByPages(number, 10);
  6.         List<FileStateInfo> list=pageInfo.getList();
  7.         return list;
  8.     }

 我这里定的一页显示10条数据，写死了。也可以从前端传递，当前页和页面大小的参数

我没有直接返回PageInfo类型数据到页面，直接pageInfo.getList()把数据取了出来，其他的信息没要。       

这里也可以将pageInfo通过model返回到页面

5.前端页面定义请求方法

  1.         function getFileByPages() {
  2.             $.ajax({
  3.                 url:"getFileWatingByPages",
  4.                 type: "get",
  5.                 data: {"pageNumber":PageNumber.toString()},
  6.                 success: function f(data) {
  7.                     // console.log(data)
  8.                     // console.log(data.length);
  9.                     for(let i=0;i<data.length;i++)
  10.                     {
  11.                         $("#fname"+(i+1)).val(data[i].fileName);
  12.                     }
  13.                 }
  14.             })
  15.         }

我定义了个js方法，利用ajax向后端controller发起请求，返回的数据就是data，在把数据赋值给对应的组件即可。

简单加个跳转上下页功能，可能不是最优的方法！

首先添加组件，加上onclick()跳转到对应的js方法

  1.       <a id="headPage" style="cursor: pointer" th:onclick="javascript:headPage()">首页</a>
  2.       <a id="lastPage" style="cursor: pointer" th:onclick="javascript:lastPage()">上一页</a>
  3.       <a id="nextPage" style="cursor: pointer" th:onclick="javascript:nextPage()">下一页</a>
  4.       <a id="tailPage" style="cursor: pointer" th:onclick="javasript:tailPage()">尾页</a>
  5.       <a id="currentpage" style="font-size: small"></a>
  6.       <a id="totalpage" style="font-size: small"></a>

我在  js里定义了两个全局变量，来记录当前是第几页(PageNumber)，和总共有多少页(Pages)

 

定义对应方法，首页，上一页等。

首页就把PageNumber赋值为1，在去调用刚才定义的请求方法，重新发起一次请求

上一页，就将PageNumber减1，再重请求一次。不过要判断一下值越界的情况

 附上完整的js代码块

  1.     <script>
  2.         var PageNumber=1;
  3.         var Pages=1;
  4.         window.onload=function () {
  5.             getPages();
  6.             getFileByPages();
  7.             currentPage();
  8.         }
  9.         function getFileByPages() {
  10.             $.ajax({
  11.                 url:"getFileWatingByPages",
  12.                 type: "get",
  13.                 data: {"pageNumber":PageNumber.toString()},
  14.                 success: function f(data) {
  15.                     // console.log(data)
  16.                     // console.log(data.length);
  17.                     for(let i=0;i<data.length;i++)
  18.                     {
  19.                         $("#fname"+(i+1)).val(data[i].fileName);
  20.                     }
  21.                 }
  22.             })
  23.         }
  24.         function headPage() {
  25.             PageNumber=1;
  26.             getFileByPages();
  27.             currentPage();
  28.         }
  29.         function lastPage() {
  30.             if(PageNumber-1>0)
  31.             {
  32.                 PageNumber=PageNumber-1;
  33.                 getFileByPages();
  34.                 currentPage();
  35.             }
  36.         }
  37.         function nextPage() {
  38.             if(PageNumber+1<Pages)
  39.             {
  40.                 PageNumber=PageNumber+1;
  41.                 getFileByPages();
  42.                 currentPage();
  43.             }
  44.         }
  45.         function tailPage() {
  46.             getPages();
  47.             PageNumber=Pages;
  48.             getFileByPages();
  49.             currentPage();
  50.         }
  51.         function getPages() {
  52.             $.ajax({
  53.                 url:"getPageNumber",
  54.                 type:"get",
  55.                 success: function f(data) {
  56.                     // console.log(data);
  57.                     Pages=data;
  58.                 }
  59.             })
  60.         }
  61.         function currentPage() {
  62.             document.getElementById("currentpage").innerText="(当前第"+PageNumber+"页";
  63.             document.getElementById("totalpage").innerText="共"+Pages+"页)";
  64.         }
  65.     </script>

新手小白，哪里写的不好，或者方法不优，请不吝指教哈！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/676974
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号