Bootstrap Paginator+PageHelper实现分页效果

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

页面效果展示

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

(0)

相关推荐

  • bootstrap与pagehelper实现分页效果

    最近做的一些小项目中,都有用到分页,需要自己去搞.就把整个分页实现整理下吧,方便自己也方便他人. 前台 1.引入paging.js //分页,页码导航,要求参数为一个对象 function createPageNav(opt) { opt= opt || {}; var $container = opt.$container || null, //必需,页码容器,请确保这个容器只用来存放页码导航 pageCount = Number(opt.pageCount) || 0, //必需,页码总数

  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:

  • Angular.js与Bootstrap相结合实现表格分页代码

    先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

  • 根据Bootstrap Paginator改写的js分页插件

    刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两种框架的方案就让我们自己做了... 刚开始在网上找了一下,觉得bootstrap-paginator的api暴露出来,修改一下就可以做成之前实习公司的那种了,但是觉得没有跳转,很奇怪,想要一个,就动手在github上把源码拿下来了,不得不说,这代码写得真是比我这些实习码农好太多.(之前实习公司的组长

  • bootstrap paginator分页插件的两种使用方式实例详解

    分页有两种方式: 1. 前台分页:ajax一次请求获取全部数据,适合少量数据(万条数据以下): $.ajax({ type: "GET", url: "",//后台接口地址 dataType: "json", success: function (msg) { var pages = Math.ceil(msg.data / 5);//data是数据总量 var element = $('#id');//对应ul的id element.boots

  • 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例

    使用bootstrap-paginator.js 分页来进行ajax 异步分页请求 具体的做法如下 : 首先定义一个异步提交请求的ajax 函数,其完整的函数如下: var nid= $("#lbnid").val(); // 获取当前新闻编号 var cpage = 1; // 当前页面号 var tpage = 10; // 总页面数 function getPaging() { getComment(cpage); //获取新闻评论 } //点击查看新闻评论 $("#o

  • 完美实现bootstrap分页查询

    最近,开始我们的Java项目,要求尽量使用bootstrap,因为它比easyUI要好看的多.然后就开始上网查,边查边做,虽然我们引入了一些bootstrap的样式,但是并没有js代码,所有的功能都需要自己用js做.其实并不难,只要我们明白分页的实质就行.说了这么多,就让我们看看分页查询的表格是怎么做出来的吧. 先上效果图: 1.引入的css样式 我们需要引入bootstrap自带的表格样式,这样比较好看,如果再需要修改的话,我们就在其基础上再改. <link rel="styleshee

  • Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. 官网地址:http://bootstrappaginator.org/ DownloadVisit Project in

  • bootstrap paginator分页前后台用法示例

    bootstrap paginator分页前后台用法示例,供大家参考,具体内容如下 准备工作: bootstrap-paginator.js 插件 github开源项目百度自行下载 引入js文件(JQuery1.8+bootstrap.min.js+bootstrap.css+bootstrap-paginator.js) <!--路径根据自己项目修改--> <link rel="stylesheet" href="/bootstrap/css/bootst

  • Bootstrap Paginator分页插件使用方法详解

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件 首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator

随机推荐