精选文章 Bootstrap Paginator分页插件使用

Bootstrap Paginator分页插件使用

作者:码农的世界,你不懂 时间: 2019-11-07 03:05:43
码农的世界,你不懂 2019-11-07 03:05:43
  • 概述
Bootstrap Paginator是一款基于Bootstrap的js分页插件。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作。
目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。
官网地址:http://bootstrappaginator.org/
参数列表:https://my.oschina.net/shunshun/blog/204587
2.demo实现 
首先编写一个分页实体Page,用于接收前台传来的分页:

public class Page {    private int currentPage=1;    //当前页数    private int totalPages;       //总页数    private int totals;           //记录总行数    private int pageSize=5;       //每页记录行数    private int prefPage;         //上一页    private int nextPage;         //下一页    public int getCurrentPage() {        return currentPage;    }    public void setCurrentPage(int currentPage) {        this.currentPage = currentPage;    }    public int getTotalPages() {        return totalPages = totals % pageSize == 0 ? totals / pageSize : totals / pageSize + 1;    }    public void setTotalPages(int totalPages) {        this.totalPages = totalPages;    }    public int getTotals() {        returntotals;    }    public void setTotals(int totals) {        this.totals = totals;    }    public int getPageSize() {        return pageSize;    }    public void setPageSize(int pageSize) {        this.pageSize = pageSize;    }    public int getNextPage() {        if (currentPage < totalPages) {            nextPage = currentPage + 1;        } else {            nextPage = currentPage;        }        return nextPage;    }    public void setNextPage(int nextPage) {        this.nextPage = nextPage;    }    public int getPrefPage() {        if (currentPage > 1) {            prefPage = currentPage - 1;        } else {            prefPage = currentPage;        }        return prefPage;    }    public voidsetPrefPage(int prefPage) {        this.prefPage = prefPage;    }}

其次,引入Bootstrap Paginator插件所依赖的js

"text/css" rel="stylesheet" href="bootstrap.css">

在前端嵌入分页代码,注意:bootstrap3版本及以上需要把 id="pageLimit"的分页放入ul标签里

"Paginator" style="text-align: center">   
    <
    /div>

    js代码的实现:

    最后实习后端代码:

        @Autowired    private Page p;    @RequestMapping(value = "/Display")    public ModelAndView Display(int page,Model model){        ModelAndView mav = new ModelAndView();        p.setTotals(blogService.getBlogTotal());        p.setCurrentPage(page);        //TODO 实现所需的功能        //分页查询        List listBlog = blogService.getBlogByPage((page-1)*p.getPageSize(),p.getPageSize());        model.addAttribute("listBlog",listBlog);        model.addAttribute("page",p);        mav.setViewName("/blog");        return mav;    }

    访问连接:

    http://localhost:8080/blogDisplay.do?page=1

    实现效果:动态查询
    更多技术资讯可关注:gzitcast
    勿删,copyright占位
    分享文章到微博
    分享文章到朋友圈

    上一篇:父组件发送参数,子组件接收参数

    下一篇:模板方法(钩子函数)

    您可能感兴趣

    • 前端开发学习常用网站网址及介绍(都是免费的)

      在开发的时候,想记住所有的单词基本是不可能的,所以就需要进入文档,只要理清需求能做出来,就很不差了!! 1.百度,俗称度娘,有不懂的就问百度,有问必答,跳转 2.百度翻译,不懂的单词,复制粘贴就懂了,跳转 3.微信小程序开发文档,跳转 4.微信公众平台,跳转 5.我的 CSDN 博客主页,跳转 6.菜鸟教程,里面有超级多的开发教程,跳转 7.W3C 教程,里面有超级多的开发教程,跳转 8.V...

    • 第一部分 bootstrap概述

      第一部分 概述 【注】 参考教材使用的是bootstrap3.X,目前bootstrap已经是4.x,故此文档以4.x为准,一定要注意两个版本之间有区别的地方。 凡是加了删除线的样式,均是在新版4.x中废除了的样式。 一、构成 基本结构 CSS 组件 JavaScript插件 定制 考试标准未明确版本,但参考教材是以3.X编写的,样题是以4.X为基础出的,故考4.x的可能性较大。 官网:ht...

    • Bootstrap Sass

      Sass (应该仅针对上午客观题,基本语法是重点) 一、概述 小型脚本语言 成熟、稳定、强大的CSS扩展语言 使用Ruby开发的 作用:对CSS进行预处理 优点: 兼容CSS语法 功能丰富 成熟 久经考验 社区 前端框架的基石 官网:http://sass.bootcss.com 二、安装 需要知道安装什么,以及安装命令即可。 【步骤一】安装Ruby(Windows适用,linux省略此步)...

    • Bootstrap第一部分 web数据交互技术概述

      第一部分 web数据交互技术概述(上午客观题) 1、Web基本概念 WWW (World Wide Web ):万维网,创建人:蒂姆.伯纳斯-李(Tim Berners-Less) HTML(HyperText Markup Language):超文本标记语言,1990年,蒂姆.伯纳斯-李及团队创建 HTTP(HyperText Transfer Protocol):超文本传输协议 URL(...

    • 【转】Bootstrap-table 使用总结

      一、什么是Bootstrap-table?   在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列...

    • 主流前端-后端-数据库总结--前端框架篇

      1、前端需要解决的问题: l 如何使同一个页面在不同的浏览器显示相同效果? l 如何使 Css 组件和 javascript 插件从 pc 端过度到移动端? l 如何保持各个组件如菜单、表格等的一致性? l 如何能够快速构建布局? 解决办法:响应式布局 一、常见的响应式布局 Ink是一个界面工具包,用于快速开发Web界面,为构建布局提供解决方案,可以展示普通的界面元素。 roundworkC...

    • 2019最新Android常用开源库总结

      怕删除,转载一下 原文:https://blog.csdn.net/wenwins/article/details/102387021 前言 收集了一些比较常见的开源库,特此记录(已收录350+)。另外,本文将持续更新,大家有关于Android 优秀的开源库,也可以在下面留言。 一 、基本控件 1.TextView HTextView 一款支持TextView文字动画效果的Android组件...

    • BAT 大厂Java 面试题集锦之核心篇附参考答案

      核心篇 数据结构与算法 网路:TCP/IP, HTTP 操作系统, 文件, shell, CPU, IO, epoll, 非阻塞IO, 进程/线程/协程,锁 HashMap, ConcurrentHashMap实现原理, 链表, 红黑树 git maven 缓存:各种缓存, redis zset与跳跃表 高并发,高可用,降级,限流,容灾,弱依赖 分布式框架 架构设计, clean code,...

    华为云40多款云服务产品0元试用活动

    免费套餐,马上领取!
    CSDN

    CSDN

    中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。