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

PageHelper地址:

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配置

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