PageHelper+Bootstrap Paginator实现分页效果

最近需要做一个分页，找了挺多的前端分页效果，发现Bootstrap Paginator分页插件效果不错，而我页面也是用BootStrap做的响应式页面，就做了实现一个简单的分页效果。

PageHelper地址:https://github.com/pagehelper/Mybatis-PageHelper

Bootstrap Paginator:https://github.com/lyonlai/bootstrap-paginator

在SpringBoot+Mybatis做分页

1.首先添加maven依赖

<dependency>  <groupId>com.github.pagehelper</groupId>  <artifactId>pagehelper</artifactId>  <version>4.1.6</version></dependency>

2.添加一个PageHelperConfig配置类

@Configurationpublic class PageHelperConfig {    @Bean    public PageHelper pageHelper(){        PageHelper pageHelper = new PageHelper();        Properties properties = new Properties();        properties.setProperty("offsetAsPageNum", "true");        properties.setProperty("rowBoundsWithCount", "true");        properties.setProperty("reasonable", "true");        properties.setProperty("reasonable","true");        properties.setProperty("pageSizeZero", "true");        pageHelper.setProperties(properties);        return pageHelper;    }}

3.写一个用来存储分页信息的对象

public class PageBean<T> implements Serializable {    private static final long serialVersionUID = 1L;    private long total; //总记录数    private List<T> list; //结果集    private int pageNum; //第几页    private int pageSize; //每页记录数    private int pages; // 总页数    private int size; //当前页的数量<=pageSize    public PageBean(List<T> list){        if (list instanceof Page){            Page<T> page = (Page<T>) list;            this.pageNum = page.getPageNum();            this.pageSize = page.getPageSize();            this.total = page.getTotal();            this.pages = page.getPages();            this.list = page;            this.size = page.size();        }    }    public long getTotal() {        return total;    }    public void setTotal(long total) {        this.total = total;    }    public List<T> getList() {        return list;    }    public void setList(List<T> list) {        this.list = list;    }    public int getSize() {        return size;    }    public void setSize(int size) {        this.size = size;    }    public int getPageNum() {        return pageNum;    }    public void setPageNum(int pageNum) {        this.pageNum = pageNum;    }    public int getPageSize() {        return pageSize;    }    public void setPageSize(int pageSize) {        this.pageSize = pageSize;    }    public int getPages() {        return pages;    }    public void setPages(int pages) {        this.pages = pages;    }}

4.在Service接口和实现上，我们可以查询到的把数据传到PageBean

public interface ArticleService {    PageBean<Article> selectArticleList(int pageNum, int pageSize);}@Servicepublic class ArticleServiceImpl implements ArticleService {    @Autowired    private ArticleMapper articleMapper;    public PageBean<Article> selectArticleList(int pageNum, int pageSize) {        PageHelper.startPage(pageNum, pageSize);        List<Article> list = this.articleMapper.selectArticleList();        return new PageBean<>(list);    }}

5.Controller

@RestControllerpublic class ArticleJsonController {    @Autowired    private ArticleService articleService;    @GetMapping("/articleManage/articlePageBean")    public PageBean articlePageBean(int pageNum, int pageSize) {        PageBean<Article> pageBean = this.articleService.selectArticleList(pageNum, pageSize);        return pageBean;    }}6.页面用Ajax无刷新分页，添加Bootstrap Paginator插件，bootstrap-paginator.js和bootstrap-responsive.min.css样式<div id="content" class="container"></div><div class="container">    <div class="panel col-sm-10 panel-default">        <div class="panel-body reply-top media">            <div id="page"></div>        </div>    </div></div>function pagehtml(pageNum) {    var articleid = $("#articleNum").val();    if (pageNum == 0){        pageNum=1;    } else {        pageNum=pageNum;    }    $.ajax({        url:"/TsengBlog/article/replyPage",        type:"get",        dataType:"json",        data: {pageNum : pageNum, pageSize : 5, articleid : articleid },        success:function (data) {            var options = {                alignment:"center",//居中显示　　　　　　　　　　currentPage: data.pageNum,//当前页数　　　　　　　　　　totalPages: data.pages,//总页数 注意不是总条数　　　　　　　　　　pageUrl: function(type, page, current){                    if (page==current) {                        return "javascript:void(0)";                    } else {                        return "javascript:pagehtml("+page+")";                    }                }            };            var html="";            $.each(data.list, function (i, obj) {                html += '<div class="panel col-sm-10 panel-default">'+                        '<div class="panel-body reply-top media">'+                        '<div class="col-sm-3 col-md-2 media-left">'+                        '<img src="image/Tseng.png" class="img-circle img-thumbnail" />'+                        '<p class="p-css">'+obj.name+'</p>'+                        '</div>'+                        '<div class="col-sm-10">'+                        '<div class="text-right">#'+i+'</div>'+                        '<hr/>'+                        '<div class="reply-content">'+                        '<span>'+obj.content+'</span>'+                        '</div>'+                        '</div>'+                        '</div>'+                        '</div>';            });            $("#content").empty();            $("#content").append(html);            $("#page").bootstrapPaginator(options);        },        error:function (error) {            alert("error");        }    });}

如果是Maven+SSM的，SSM整合就不多说了，网上有很多博客和例子整合。

1.mybatis.xml配置

<configuration>    <plugins>        <plugin interceptor="com.github.pagehelper.PageHelper">            <property name="dialect" value="mysql" />            <property name="pageSizeZero" value="true" />　　　　　　　　<property name="offsetAsPageNum" value="true" />　　　　　　　　　　<property name="reasonable" value="true" />　　　　　　　　<property name="rowBoundsWithCount" value="true" />        </plugin>    </plugins></configuration>2.servicepublic PageInfo page(pageNum, pageSize){    PageHelper.startPage(pageNum, pageSize);    List<ShopNav> lists = navService.getAllNav();    PageInfo<ShopNav> pageInfo = new PageInfo<ShopNav>(lists);　　return PageInfo; }页面效果展示