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版的、小号的、正常的、大号的。 |
| alignment | string | "left" | 设置控件的对齐方式,是个字符串, 允许的值用: left, center andright. 即:左对齐、居中对齐、右对齐。 |
| 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: 该参数是个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 示例:
var options = {
alignment:"center",//居中显示
currentPage: pageIndex,//当前页数
totalPages: total,//总页数 注意不是总条数
pageUrl: function(type, page, current){
if (page==current) {
return "javascript:void(0)";
} else {
return "/Articles?pageSize=15&pageIndex="+page;
}
}
}
$("#pagintor").bootstrapPaginator(options);// $("#pagintor") Bootstrap 是2.X 使用div元素,3.X使用ul元素


注意:分页样式用BootStrap 的,如果单独使用,请去BootStrap中把分页样式拷出来。jQuery版本需要1.8及以上。
Bootstrap Paginator 分页插件参数介绍及使用的更多相关文章
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
- Bootstrap Paginator分页插件(mark)
Bootstrap Paginator分页插件
- Bootstrap Paginator分页插件的使用
今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...
- Bootstrap Paginator分页插件使用示例
最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...
- bootstrap-paginator基于bootstrap的分页插件
bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...
- jq.paginator分页插件稍加修改
样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...
- 基于bootstrap的分页插件
之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...
随机推荐
- paas架构之docker——镜像管理
1. 镜像管理 1.1. 列出镜像 Sudo docker images 1.2. 查看镜像 Sudo docker images xxxx 1.3. 拉取镜像 Sudo docker pull ub ...
- [Weblogic]如何清理缓存
背景:在开发调试或测试时,很多时候重新更新部署服务后会发现某些更新并没有体现到,还是之前的情况,也或者会出现其他错误问题,这个时候就要考虑到可能是weblogic缓存未清理引起. 清理缓存步骤如下: ...
- MySQL添加字段和删除字段
MySQL添加字段应该如何实现呢?这是很多刚刚接触MySQL数据库的新人都提到过的问题,下面就为您介绍MySQL添加字段和删除字段的方法,希望对您能有所启迪. MySQL添加字段: alter tab ...
- java运算符总结
1.算数运算符:+.-.*./.%(加减乘除取余) 2.自增自减:++.-- 3.赋值运算符:=.+=.-=.*=./= 4.关系运算符:>.<.>=.<=.==.!= 逻辑运 ...
- 浅谈Python时间模块
浅谈Python时间模块 今天简单总结了一下Python处理时间和日期方面的模块,主要就是datetime.time.calendar三个模块的使用.希望这篇文章对于学习Python的朋友们有所帮助 ...
- poj 3177 Redundant Paths
题目链接:http://poj.org/problem?id=3177 边双连通问题,与点双连通还是有区别的!!! 题意是给你一个图(本来是连通的),问你需要加多少边,使任意两点间,都有两条边不重复的 ...
- 数据结构--AC自动机--hdu 2896
病毒侵袭 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- Linux之存储及文件系统管理
一.存储管理 1.各种存储设备在Linux系统中对应的文件名 2.硬盘结构及分区 1).硬盘结构 2) .为什么要进行硬盘分区: a) 更容易管理和控制系统,因为相关的文件和目录都放在一个分区中. b ...
- DB String Split sample
以sqlserver为例进行说明,代码稍加修改,可以用于ORACLE. 字符串的拆分和聚合是数据库开发人员比较常见的任务. 关于字符串的聚合和拆分,sqlserver的标准解决方案是for xml p ...
- Codeforces Round #253 Div2 D.Andrey and Problem 概率+贪心
概率计算:P(某set) = 令: 和 现在考虑: 1.考虑某个集合,再加一个概率为Pi的朋友后能不能使总概率提高. 即: 由公式可知, 如果 S < 1,则delta > 0,则 ...