重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

BootstrapPaginator+PageHelper实现分页效果

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

成都创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站建设、镇坪网络推广、小程序开发、镇坪网络营销、镇坪企业策划、镇坪品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联为所有大学生创业者提供镇坪建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

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

页面效果展示

Bootstrap Paginator+PageHelper实现分页效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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


分享题目:BootstrapPaginator+PageHelper实现分页效果
文章源于:http://cqcxhl.com/article/pcgjic.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP