文档章节

Bootstrap分页插件--Bootstrap Paginator

李佳顺
 李佳顺
发布于 2014/03/03 13:42
字数 1453
阅读 7.8W
收藏 12

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

官网地址:http://bootstrappaginator.org/

DownloadVisit Project in GitHub

它的使用和其他Bootstrap内置的插件一样,需要引入如下文件:

view sourceprint?

1.<link href="css/bootstrap.css" rel="stylesheet">

2.<script type="text/javascript" src="js/jquery-1.8.1.js"></script>

3.<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

注意:jquery要使用1.8版本以上的。

入门实例

效果:

代码

view sourceprint?

01.<div id="example"></div>

02.<script type='text/javascript'>

03.var options = {

04.currentPage: 4,

05.totalPages: 10,

06.numberOfPages:5

07.}

08. 

09.$('#example').bootstrapPaginator(options);

10.</script><span style="font-family:'sans serif, tahoma, verdana, helvetica';"><span style="white-space:normal;"> </span></span>

只需要简单的一句即可:$('#example').bootstrapPaginator(options)将id为'example'的dom元素设置为分页组件,同时传入一些定制参数。currentPage设置当前页码,totalPages设置共多少页,numberOfPages设置显示的页码数。

组件结构

组件结构如上图包括5中类型的操作按钮,如:首页(first)、尾页(last)、上一页(prev)、下一页(next) 、以及页(page)。当然这是默然的结构,我们可通过参数对结构及样式进行定制。

参数

参数名 数据类型 默认值 描述
size string "normal" 设置控件的显示大小,是个字符串. 允许的值: minismallnormal,large。值:mini版的、小号的、正常的、大号的。
alignment string "left" 设置控件的对齐方式,是个字符串, 允许的值用: leftcenter andright. 即:左对齐、居中对齐、右对齐。
itemContainerClass function
该参数接收一个函数,返回一个字符串,该字符串是一个我们自定义的class类样式。当控件内的每个操纵按钮被渲染(render)时,都会调用该函数,同时把有关该按钮的信息作为参数传入。参数:type,pagecurrent 。type为该控件的操作按钮的类型,如上图所示的五种类型:first、prev、page、next、last。page为该按钮所属第几页。current 指示整个控件的当前页是第几页。
currentPage number 1 设置当前页.
numberOfPages number 5 设置控件显示的页码数.即:类型为"page"的操作按钮的数量。
totalPages number 1 设置总页数.
pageUrl function
实际上,控件内的每个操作按钮最终会被渲染成超链接,该参数的作用就是设置超链接的链接地址。该参数是个函数,参数为:type,pagecurrent。这样我们就可以通过这个函数为每个操作按钮动态设置链接地址。如:"http://example.com/list/page/"+page
shouldShowPage boolean/function true 该参数用于设置某个操作按钮是否显示,可是个布尔值也可是个函数。当为true时,显示。当为false时,不显示。如果该参数是个函数,需要返回个布尔值,通过这个返回值判断是否显示。函数有3个参数: typepagecurrent。使用函数的好处是,可以对每个操作按钮进行显示控制。
itemTexts function
控制每个操作按钮的显示文字。是个函数,有3个参数: typepagecurrent。通过这个参数我们就可以将操作按钮上的英文改为中文,如first-->首页,last-->尾页。
tooltipTitles function
设置操作按钮的title属性。是个函数,有3个参数: typepagecurrent。
useBootstrapTooltip boolean false 设置是否使用Bootstrap内置的tooltip。 true是使用,false是不使用,默认是不使用。注意:如果使用,则需要引入bootstrap-tooltip.js插件。
bootstrapTooltipOptions object
    Default:
    {
        animation: true,
        html: true,
        placement: 'top',
        selector: false,
        title: "",
        container: false }

该参数是个js对象。当参数useBootstrapTooltiptrue会将该对象传给Bootstrap的bootstrap-tooltip.js插件。

onPageClicked function
为操作按钮绑定click事件。回调函数的参数:eventoriginalEventtype,page。
onPageChanged function
为操作按钮绑定页码改变事件,回调函数的参数:eventoldPagenewPage。

公共命令

另外该插件还提供了几个公共的命令,可以通过如下方法调用,如:$('#example').bootstrapPaginator("show",3) 调用show命令$('#example').bootstrapPaginator("getPages") 调用getPages命令

命令名 参数 返回值 描述
show page
show命令用于直接跳转到特定的page,与直接点击操作按钮的效果是一样的。使用方法,如:$('#example').bootstrapPaginator("show",3) 直接跳转到第3页,$('#example').bootstrapPaginator("show",100)直接跳转到100页。 
showFirst

showFirst 命令用于直接跳转到首页,与点击first按钮相同。使用方法:$('#example').bootstrapPaginator("showFirst") 
showPrevious

showPrevious 命令用于直接跳转到上一页。使用方法:$('#example').bootstrapPaginator("showPrevious") 
showNext

showNext命令用于直接跳转到下一页。
showLast

showLast 命令用于直接跳转到上一页。
getPages
object getPages命令用于返回当前控件中显示的页码,以数组形式返回。使用方法:var arra = $('#example').bootstrapPaginator("getPages") 
setOptions object
setOptions 命令用于重新设置参数,使用方法:$('#example').bootstrapPaginator("setOptions",newoptions)

事件Events

Bootstrap Paginator 提供了俩个事件:page-clickedpage-changed。这俩个事件作为参数使用,分别对应onPageClickedonPageChanged。

事件名 回调函数 描述
page-clicked function(eventoriginalEventtypepage) 同上文。另外,参数eventoriginalEvent是俩个jquery事件对象,可参考jquery相关文档
page-changed function(eventoldPagenewPage) 同上文


另外,demo就不写了,建议大家上官网,官网对于每个参数、命令、事件 都提供了实例,在通过参考上面的文档就比较好理解了。


 var options = {
            currentPage: 3,
            totalPages: 10,
            pageUrl: function(type, page, current){                return "http://example.com/list/page/"+page;

            }
        }

        $('#example').bootstrapPaginator(options);


© 著作权归作者所有

上一篇: php math函数
下一篇: android 设计
李佳顺

李佳顺

粉丝 22
博文 579
码字总数 303798
作品 0
朝阳
程序员
私信 提问
加载中

评论(6)

m
mudfish

引用来自“草天文刀”的评论

为什么一页就将我的所有数据全部显示完了,后面的每一页都是这样,将返回的所有数据都显示了,查了好久没有查到有关于每页多少条数据量的参数,我这个怎么解决,急求!!!
看见好看好看就
草天文刀
为什么一页就将我的所有数据全部显示完了,后面的每一页都是这样,将返回的所有数据都显示了,查了好久没有查到有关于每页多少条数据量的参数,我这个怎么解决,急求!!!
此账号已删除
此账号已删除
将:bootstrap-paginator.js里的:$("<ul></ul>") 改为:$("<ul class=\"pagination\"></ul>")
此来正解~~
郑州网建
郑州网建
将:bootstrap-paginator.js里的:$("<ul></ul>") 改为:$("<ul class=\"pagination\"></ul>")
郑州网建
郑州网建

引用来自“仙飞”的评论

为什么我的出来没有样式,css文件引用路径都是对的,,仔细看代码,发现pagination这个class加在了div上了,如果加在ul上就样式对了,可是代码无法加在ul上,html代码总共就只有一个div,其余的都是js自己去添加的,求解决!!!
出现这个的原因是因为,你要引用Bootstrap.css v3.0.0版本的。同时,官网提供的bootstrapv3.min.css 这个也有问题。用bootstrapv3.css就可以了。 具体的内部原因,暂时没时间查证。有时间了,会更新到http://camnpr.com/
仙飞
仙飞
为什么我的出来没有样式,css文件引用路径都是对的,,仔细看代码,发现pagination这个class加在了div上了,如果加在ul上就样式对了,可是代码无法加在ul上,html代码总共就只有一个div,其余的都是js自己去添加的,求解决!!!
Bootstrap Paginator分页插件使用

Bootstrap Paginator分页插件使用 概述 Bootstrap Paginator是一款基于Bootstrap的js分页插件。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事...

1027888989178846
2018/12/12
0
0
支持bootstrap v3的分页js插件,就像bootstrap-paginator那样但是bootstrap-paginator不支持V3只支持V2

有没有支持bootstrap v3的分页js插件,就像bootstrap-paginator那样但是bootstrap-paginator不支持V3只支持V2

陈超旗
2014/11/06
524
0
Bootstrap js插件使用大全

Bootstrap JS扩展插件使用实例(9)-datepicker Bootstrap JS插件使用实例(8)-按钮 Bootstrap JS插件使用实例(7)-通知消息 Bootstrap JS插件使用实例(6)-折叠(手风琴效果) Bootstrap JS插件使用...

zuolz1985
2013/05/26
0
0
JavaScript 分页插件--bootstrap-paginator

Bootstrap Paginator 一款基于Bootstrap的js分页插件,功能很丰富,可以简化 Bootstrap 分页组件。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及...

叶秀兰
2014/03/03
2.3W
1
基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往...

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

每天AC系列(六):有效的括号

1 题目 LeetCode第20题,这题比较简单,匹配括号. 2 栈 这是栈的典型应用,括号匹配,当然不需要直接使用栈,使用一个StringBuilder即可: if(s.isEmpty()) return true;char a = s.charAt(0);...

Blueeeeeee
今天
27
0
Spring AOP-06-切入点类型

切入点是匹配连接点的拦截规则。之前使用的是注解@Pointcut,该注解是AspectJ中的。除了这个注解之外,Spring也提供了其他一些切入点类型: • 静态方法切入点StaticMethodMatcherPointcut •...

moon888
昨天
90
0
Class Loaders in Java

1. Introduction to Class Loaders Class loaders are responsible for loading Java classes during runtime dynamically to the JVM (Java Virtual Machine). Also, they are part of the ......

Ciet
昨天
96
0
以Lazada为例,看电商系统架构演进

什么是Lazada? Lazada 2012年成立于新加坡,是东南亚第一电商,2016年阿里投资10亿美金,2017年完成对lazada的收购。 业务模式上Lazada更偏重自营,类似于亚马逊,自建仓储和为商家提供服务...

春哥大魔王的博客
昨天
62
0
【自用】 Flutter Timer 简单用法

dart: void _startTime() async { _timer = Timer(Duration(seconds: sec), () { fun(xxx,yyy,zzz); }); } @override void dispose() { _timer.cancel()......

Tensor丨思悟
昨天
65
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部