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 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
详解vue在项目中使用百度地图
Mar 26 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python绘制随机网络图形示例
2019/11/21 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
给妈妈洗脚活动方案
2014/08/16 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
运动会100米广播稿
2015/08/19 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
python迷宫问题深度优先遍历实例
2021/06/20 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python