Bootstrap Paginator+PageHelper实现分页效果


Posted in Javascript onDecember 29, 2018

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

页面效果展示

Bootstrap Paginator+PageHelper实现分页效果

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
javascript中json基础知识详解
Jan 19 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
玩转Koa之核心原理分析
Dec 29 #Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 #Javascript
bootstrap与pagehelper实现分页效果
Dec 29 #Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 #Javascript
vue实现分页组件
Jun 16 #Javascript
如何用RxJS实现Redux Form
Dec 29 #Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 #Javascript
You might like
PHP开发需要注意的安全问题
2010/09/01 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
详解php命令注入攻击
2019/04/06 PHP
php和asp语法上的区别总结
2019/05/12 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
python生成器generator用法实例分析
2015/06/04 Python
浅析Python基础-流程控制
2016/03/18 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
暑假实习求职信范文
2013/09/22 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
规划编制实施方案
2014/03/15 职场文书
实习协议书范本
2014/04/22 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
师范生见习总结范文
2015/06/23 职场文书
小学英语课教学反思
2016/02/15 职场文书