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依赖

  com.github.pagehelper
  pagehelper
  4.1.6

2.添加一个PageHelperConfig配置类

@Configuration
public 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 implements Serializable {
    private static final long serialVersionUID = 1L;
    private long total; //总记录数
    private List list; //结果集
    private int pageNum; //第几页
    private int pageSize; //每页记录数
    private int pages; // 总页数
    private int size; //当前页的数量<=pageSize

    public PageBean(List list){
        if (list instanceof Page){
            Page page = (Page) 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 getList() {
        return list;
    }

    public void setList(List 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
 selectArticleList(int pageNum, int pageSize);
}

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

5.Controller

@RestController
public class ArticleJsonController {
    @Autowired
    private ArticleService articleService;
    @GetMapping("/articleManage/articlePageBean")
    public PageBean articlePageBean(int pageNum, int pageSize) {
        PageBean
 pageBean = this.articleService.selectArticleList(pageNum, pageSize);
        return pageBean;
    }
}

6.页面用Ajax无刷新分页，添加Bootstrap Paginator插件，bootstrap-paginator.js和bootstrap-responsive.min.css样式


    

        

            

        
    


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 += '
'+
                        '
'+
                        '
'+
                        ''+
                        '
'+obj.name+'
'+
                        '
'+
                        '
'+
                        '
#'+i+'
'+
                        '
'+
                        '
'+
                        ''+obj.content+''+
                        '
'+
                        '
'+
                        '
'+
                        '
';
            });
            $("#content").empty();
            $("#content").append(html);
            $("#page").bootstrapPaginator(options);
        },
        error:function (error) {
            alert("error");
        }
    });
}

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

1.mybatis.xml配置

    
        
            
            
　　　　　　　　offsetAsPageNum" value="true" />　　
　　　　　　　　reasonable" value="true" />
　　　　　　　　rowBoundsWithCount" value="true" />
        
    


2.service
public PageInfo page(pageNum, pageSize){
    PageHelper.startPage(pageNum, pageSize);
    List lists = navService.getAllNav();
    PageInfo pageInfo = new PageInfo(lists);
　　return PageInfo; 
}

页面效果展示