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 选择器、DOM操作、事件、动画
Nov 25 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
OpenLayers实现图层切换控件
Sep 25 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
php discuz 主题表和回帖表的设计
2009/03/13 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python解析含有重复key的json方法
2019/01/22 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python 列表的清空方式
2020/01/13 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
网站美工岗位职责
2014/04/02 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
教师辞职书范文
2015/02/26 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android