分页插件 Bootstrap Paginator
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作。目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。
GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator
参数介绍:
参数名 |
数据类型 |
默认值 |
描述 |
bootstrapMajorVersion |
number |
2 |
搭配使用的Bootstrap版本,2.X 的 分页必须使用div元素,3.X分页的必须使用ul元素。请注意与所使用的bootstrap版本对应上。 |
size |
string |
"normal" |
设置控件的显示大小,是个字符串. 允许的值: mini, small, normal,large。值:mini版的、小号的、正常的、大号的。 |
itemContainerClass |
function |
该参数接收一个函数,返回一个字符串,该字符串是一个我们自定义的class类样式。当控件内的每个操纵按钮被渲染(render)时,都会调用该函数, 同时把有关该按钮的信息作为参数传入。参数:type,page, current 。type为该控件的操作按钮的类型,如上图所示的五种类型:first、prev、page、next、last。 page为该按钮所属第几页。current 指示整个控件的当前页是第几页。 |
|
currentPage |
number |
1 |
设置当前页. |
numberOfPages |
number |
5 |
设置控件显示的页码数.即:类型为"page"的操作按钮的数量。 |
totalPages |
number |
1 |
设置总页数. |
pageUrl |
function |
实际上,控件内的每个操作按钮最终会被渲染成超链接,该参数的作用就是设置超链接的链接地址。该参数是个函数,参数为:type,page, current。 这样我们就可以通过这个函数为每个操作按钮动态设置链接地址。如:"http://example.com/list/page/"+page |
|
shouldShowPage |
boolean/function |
true |
该参数用于设置某个操作按钮是否显示,可是个布尔值也可是个函数。当为true时,显示。当为false时,不显示。如果该参数是个函数,需要返回个布尔值, 通过这个返回值判断是否显示。函数有3个参数: type, page, current。使用函数的好处是,可以对每个操作按钮进行显示控制。 |
itemTexts |
function |
控制每个操作按钮的显示文字。是个函数,有3个参数: type, page, current。通过这个参数我们就可以将操作按钮上的英文改为中文, 如first-->首页,last-->尾页。 |
|
tooltipTitles |
function |
设置操作按钮的title属性。是个函数,有3个参数: type, page, current。 |
|
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对象。当参数useBootstrapTooltip为true时,会将该对象传给Bootstrap的bootstrap-tooltip.js插件。 |
|
onPageClicked |
function |
为操作按钮绑定click事件。回调函数的参数:event, originalEvent, type,page。 |
|
onPageChanged |
function |
为操作按钮绑定页码改变事件,回调函数的参数:event, oldPage, newPage。 |
公共命令:
另外该插件还提供了几个公共的命令,可以通过如下方法调用,如:$('#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-clicked和page-changed。这俩个事件作为参数使用,分别对应onPageClicked和onPageChanged。
事件名 |
回调函数 |
描述 |
page-clicked |
function(event, originalEvent, type, page) |
同上文。另外,参数event, originalEvent是俩个jquery事件对象,可参考jquery相关文档 |
page-changed |
function(event, oldPage, newPage) |
同上文 |
Demo 示例:
$("#pagintor").bootstrapPaginator({ bootstrapMajorVersion:3,//默认是2,如果是bootstrap3版本,这个参数必填 currentPage:1,//当前页 totalPages:10,//总页数 size:"small",//设置控件的大小,mini, small, normal,large onPageClicked:function(event, originalEvent, type,page){ //为按钮绑定点击事件 page:当前点击的按钮值 } }); |
注意:分页样式用BootStrap 的,如果单独使用,请去BootStrap中把分页样式拷出来。jQuery版本需要1.8及以上。
分页插件 Bootstrap Paginator的更多相关文章
- bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)
html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div cl ...
- Bootstrap分页插件--Bootstrap Paginator
开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件: & ...
- 如何使用前端分页框架bootstrap paginator
前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能.在实现交互良好的页面翻页功能时,往往还需要配合使用后端分页框架pagehelper.pagehelper ...
- 基于bootstrap的分页组件-Bootstrap Paginator
效果
- Bootstrap Paginator分页插件的使用
今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...
- Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- 利用Bootstrap Paginator插件和KnockoutJS完成分页功能
在最近一个项目中,需要结合一堆条件查询并对查询的结果数据完成一个简单分页功能,可是做着做着,自己的思路越来越模糊,做到心态崩溃!!! 哈哈,特此花点时间重新总结,并从最简单的分页,然后向多条件查询分页 ...
随机推荐
- 搭建vue项目并启动vue项目
链接地址:https://blog.csdn.net/aa792978017/article/details/82939483 Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vu ...
- SpringCLoud之搭建Zuul网关集群
1.使用技术 Springboot,SpringCloud,Zuul,Nignx 2.目的 使用Zuul搭建微服务高可用的网关 3.项目创建 3.1 创建注册中心(略) 3.2 创建一个hello-s ...
- OC中保存自定义类型对象的持久化方法
OC中如果要将自定义类型的对象保存到文件中,必须进行以下三个条件: 想要把存放自定义类型的数组进行 持久化(就是将内存中的临时数据以文件<数据库等>的形式写到磁盘上)必须满足: 1. 自定 ...
- Django2 --- cookie
1. 什么是cookie ?用途是什么? Cookies是一些存储在用户电脑上的小文件.它是被设计用来保存一些站点的用户数据,这样能够让服务器为这样的用户定制内容,后者页面代码能够获取到Cookie值 ...
- NotSerializableException
这个错误是实体类没有 继承 Serializeble.
- Linux内核设计与实现 总结笔记(第五章)系统调用
系统调用 内核提供了用户进程和内核交互的接口,使得应用程序可以受限制的访问硬件设备. 提供这些接口主要是为了保证系统稳定可靠,避免应用程序恣意妄行. 一.内核通信 系统调用在用户空间进程和硬件设备之间 ...
- [CF846B]Math Show题解
暴力一下就好啦! 枚举一下一共做多少次任务,剩下的时间将子任务排序,从头开始能取多少取多少就行了. 贴个代码 #include <cstdio> #include <algorith ...
- Android 中的 Matrix
Matrix 是 Android SDK 提供的一个矩阵类,它代表一个 3 X 3 的矩阵 Matrix主要可以对图像做4种基本变换 Translate 平移变换 Rotate 旋转变换 Scale ...
- LRU management
LRU management 字典树用来查找值,实现map<string,int>操作 tips:tot必须从一开始QAQ #include<bits/stdc++.h> us ...
- 2017年度最具商业价值人工智能公司TOP50 榜单发布
2017年度最具商业价值人工智能公司TOP50 榜单发布 未来最有赚钱潜力的50个人工智能项目都在这里了. 经过了60年的发展,人工智能在2017年,正式走向应用的元年. 从今年起,人工智能首次被写入 ...