SpringBoot上PageHelper分页的简单使用

官方文档
Spring Boot 集成

1.导入pom依赖

<!-- pagehelper -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.5</version>
</dependency>

2.修改配置文件

详细的配置文件可以参考下面的官方文档

点击跳转

application.properties

#pagehelper分页插件配置
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql

application.yml

pagehelper:
    helperDialect: mysql
    reasonable: true
    supportMethodsArguments: true
    params: count=countSql

这里省略dao service和Dao.xml 里的内容

就是简单的查询全部的sql语句 以List来接收

3.ProvinceController

  @GetMapping("/provinces")
    public List<Province> lists(@RequestParam(defaultValue = "1") int pageNo, @RequestParam(defaultValue = "3") int pageSize) {
        PageHelper.startPage(pageNo,pageSize);
        return provinceService.findAll();
    }

这里默认当前页pageNo为第一页 每页的数量pageSize为3条

返回的数据

但这种方法只是返回了对应的数据 并不是我们真正想要的

4.封装返回结果

简单来讲 就两步

1.使用com.github.pagehelper包里的Page代替List封装返回的结果

public class Page<E> extends ArrayList<E> implements Closeable {
    private static final long serialVersionUID = 1L;

    /**
     * 页码，从1开始
     */
    private int pageNum;
    /**
     * 页面大小
     */
    private int pageSize;
    /**
     * 起始行
     */
    private int startRow;
    /**
     * 末行
     */
    private int endRow;
    /**
     * 总数
     */
    private long total;
    /**
     * 总页数
     */
    private int pages;
}

2.使用com.github.pagehelper的PageInfo 并将Page传入 以获得更丰富的返回类型

public class PageInfo<T> extends PageSerializable<T> {
    //当前页
    private int pageNum;
    //每页的数量
    private int pageSize;
    //当前页的数量
    private int size;

    //由于startRow和endRow不常用，这里说个具体的用法
    //可以在页面中"显示startRow到endRow 共size条数据"

    //当前页面第一个元素在数据库中的行号
    private int startRow;
    //当前页面最后一个元素在数据库中的行号
    private int endRow;
    //总页数
    private int pages;

    //前一页
    private int prePage;
    //下一页
    private int nextPage;

    //是否为第一页
    private boolean isFirstPage = false;
    //是否为最后一页
    private boolean isLastPage = false;
    //是否有前一页
    private boolean hasPreviousPage = false;
    //是否有下一页
    private boolean hasNextPage = false;
    //导航页码数
    private int navigatePages;
    //所有导航页号
    private int[] navigatepageNums;
    //导航条上的第一页
    private int navigateFirstPage;
    //导航条上的最后一页
    private int navigateLastPage;
}

dao

public interface ProvinceDAO {

	 Page<Province> findAll();
}

service类似 这里省略了

 @GetMapping("/provinces")
    public PageInfo<Province> lists(@RequestParam(defaultValue = "1") int pageNo, @RequestParam(defaultValue = "1") int pageSize) {
        PageHelper.startPage(pageNo,pageSize);
        PageInfo<Province> info = new PageInfo<>(provinceService.findAll());
        return info;
    }

因为数据比较少 每页只展示一条数据

这是返回的数据

前端对应不同的参数 就可以写出好看的页面啦

后续可能会更新…

这里模仿下百度贴吧的分页

第一页

中间页

尾页

使用的是vue前后端分离的方式 可能有点繁琐

 <div id="pages">
                <a href="#" v-show="!isFirst" @click="getlist(1)">首页</a>
                <a href="#" v-show="hasPrev" class="page" @click="getlist(prePage)">&lt;上一页</a>
                <span v-for='n in nums'><a href="#" class="page" @click="getlist(n)">{{n}}</a></span>
                <a href="#" v-show="hasNext" class="page" @click="getlist(nextPage)">下一页&gt;</a>
                <a href="#" v-show="!isLast" @click="getlist(pages)">尾页</a>
</div>


<script>
    var app = new Vue({
        el: "#wrap",
        data: {
            province:{},
            page:"1",
            size:"1",
            //这都是默认为第一页 有一堆数据的情况下的默认参数
            isFirst:true,
            isLast:false,
            hasNext:true,
            hasPrev:false,
            prePage:'0',
            nextPage:'2',
            pages:'',
            nums:{}
        },
        methods: {
            getlist(no) {
                var _this = this
                axios.get("http://localhost:8888/province/findByPager?pageNo="+no+"&pageSize="+this.size)
                    .then(res => {
                        console.log(res.data);
                        _this.province=res.data.data.list
                        //首页和尾页
                        _this.isFirst=res.data.data.isFirstPage
                        _this.isLast=res.data.data.isLastPage
                        //是否有上一页下一页
                        _this.hasNext=res.data.data.hasNextPage
                        _this.hasPrev=res.data.data.hasPreviousPage
                        //前一页后后一页
                        _this.prePage=res.data.data.prePage
                        _this.nextPage=res.data.data.nextPage
                        //最后一页
                        _this.pages=res.data.data.pages
                        //总的页数数组
                        _this.nums=res.data.data.navigatepageNums

                    })
            },
            delpro(id){
                var _this = this
                axios.get("http://localhost:8888/province/delpro?id="+id)
                    .then(res => {
                        console.log(res.data);
                        alert(res.data.msg)
                        location.reload()
                    })
            }

        },
        created() {
            this.getlist(this.page)
        }
    })

</script>

大概是这个样子的 试验了下 没多大问题 当页数多的时候 他有个优化的操作 所以不用担心

5.扩展：自定义分页

如果我们对sql查出来的结果进行处理 后再变成分页的形式 那么上面的就无法满足我们的条件了

我们需要自己定义下分页 写了一个小工具 简单介绍下

因为一般返回的结果是list类型 所以直接传list就可以了

   public static PageInfo pageInfo(int pageNo,int pageSize,List list) {
   		//传入页数 一页有几条
        Page page = new Page<>(pageNo, pageSize);
        //设置总条数
        int total = list.size();
        //设置开始的索引
        int startIndex = (pageNo - 1) * pageSize;
        //设置结束的索引
        int endIndex = Math.min(startIndex + pageSize,total);
        page.setTotal(total);
        //最终根据开始索引和结束索引截取对应的分页内容
        //注意 sublist 截取包含开始位置 不包含结束位置  这个样子的哦 [)
        page.addAll(list.subList(startIndex, endIndex));
        return new PageInfo<>(page);
    }

最终返回的PageInfo对象就是我们需要的分页 放入Result 统一结果返回类即可