Bootstrap Paginator+PageHelper实现分页效果

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

PageHelper地址

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); }}