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

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

@service
public 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

@restcontroller
public 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.service

public pageinfo page(pagenum, pagesize){
 pagehelper.startpage(pagenum, pagesize);
 list<shopnav> lists = navservice.getallnav();
 pageinfo<shopnav> pageinfo = new pageinfo<shopnav>(lists);
　　return pageinfo; 
}

页面效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。