Springboot搭配PageHelper实现分页查询

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

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

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

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

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

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

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

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

pagehelper:
  helper-dialect: mysql
  reasonable: true
  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.在实现类中定义分页查询方法

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

返回的类型是PageInfo类型；

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

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

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

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

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

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

 

 4.在controller中调用分页方法

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

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

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

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

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

        function getFileByPages() {
            $.ajax({
                url:"getFileWatingByPages",
                type: "get",
                data: {"pageNumber":PageNumber.toString()},
                success: function f(data) {
                    // console.log(data)
                    // console.log(data.length);
                    for(let i=0;i<data.length;i++)
                    {
                        $("#fname"+(i+1)).val(data[i].fileName);
                    }
                }
            })
        }

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

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

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

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

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

 

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

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

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

 附上完整的js代码块

    <script>
        var PageNumber=1;
        var Pages=1;
        window.onload=function () {
            getPages();
            getFileByPages();
            currentPage();
        }
        function getFileByPages() {
            $.ajax({
                url:"getFileWatingByPages",
                type: "get",
                data: {"pageNumber":PageNumber.toString()},
                success: function f(data) {
                    // console.log(data)
                    // console.log(data.length);
                    for(let i=0;i<data.length;i++)
                    {
                        $("#fname"+(i+1)).val(data[i].fileName);
                    }
                }
            })
        }
        function headPage() {
            PageNumber=1;
            getFileByPages();
            currentPage();
        }
        function lastPage() {
            if(PageNumber-1>0)
            {
                PageNumber=PageNumber-1;
                getFileByPages();
                currentPage();
            }
        }
        function nextPage() {
            if(PageNumber+1<Pages)
            {
                PageNumber=PageNumber+1;
                getFileByPages();
                currentPage();
            }
        }
        function tailPage() {
            getPages();
            PageNumber=Pages;
            getFileByPages();
            currentPage();
        }
        function getPages() {
            $.ajax({
                url:"getPageNumber",
                type:"get",
                success: function f(data) {
                    // console.log(data);
                    Pages=data;
                }
            })
        }
        function currentPage() {
            document.getElementById("currentpage").innerText="(当前第"+PageNumber+"页";
            document.getElementById("totalpage").innerText="共"+Pages+"页)";
        }
    </script>

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