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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
JavaScript原型链详解
Nov 07 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
谈谈PHP语法(3)
2006/10/09 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python中几个比较常见的名词解释
2015/07/04 Python
python中set常用操作汇总
2016/06/30 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python验证码图片处理(二值化)
2019/11/01 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
如何高效率的查找一个月以内的数据
2012/04/15 面试题
《骑牛比赛》教后反思
2014/04/22 职场文书
网站推广策划方案
2014/06/04 职场文书
合作经营协议书范本
2014/09/16 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
西岭雪山导游词
2015/02/06 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python