Bootstrap Paginator+PageHelper实现分页效果

更新时间：2020-08-10 10:00:01 作者：startmvc

最近需要做一个分页，找了挺多的前端分页效果，发现BootstrapPaginator分页插件效果不错，而

最近需要做一个分页，找了挺多的前端分页效果，发现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; 
}

页面效果展示