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"    设置控件的显示大小,是个字符串. 允许的值: 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对象。当参数useBootstrapTooltip为true时,会将该对象传给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 = {
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 分页插件参数介绍及使用的更多相关文章

  1. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  2. Bootstrap Paginator分页插件+ajax

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub  Bootstrap分页插件属性介绍: http://www.cnblogs. ...

  3. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  4. Bootstrap Paginator分页插件(mark)

    Bootstrap Paginator分页插件

  5. Bootstrap Paginator分页插件的使用

    今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...

  6. Bootstrap Paginator分页插件使用示例

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...

  7. bootstrap-paginator基于bootstrap的分页插件

    bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...

  8. jq.paginator分页插件稍加修改

    样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...

  9. 基于bootstrap的分页插件

    之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...

随机推荐

  1. 高仿700Bike的界面图片

    下面展示本人高仿项目"700Bike"的已经完成的界面:  

  2. IDO分享 | 如何在centos下安装OpenCMS

    本次的opencms环境是在两台机器上搭建的. 一台服务器安装mySQL, 一台服务器安装jdk.tomcat.opencms.也可以将jdk.mySQL.tomcat.opencms安装在同一个机器 ...

  3. find locate

    locate执行前先 updatedb 然后locate vstore 就可以了 find 加 -name 比如 find -name vstore 按理说 locate要快点,毕竟是数据库嘛 一:l ...

  4. MySQL之ALTER

    1:删除列 ALTER TABLE [表名字] DROP [列名称] 2:增加列 ALTER TABLE [表名字] ADD [列名称] INT NOT NULL COMMENT '注释说明' 3:修 ...

  5. 读书笔记——Windows核心编程(8)Interlocked系列函数

    先让我们来复习下小学知识 A+B=C//式中A为被加数,B为加数. A-B=C//式中A为被减数,B为减数. 再让我们来明确一个知识点:返回值为void的Windows函数意味着一定会执行成功. -- ...

  6. zookeeper 集群搭建

    windows 环境下单机搭建伪集群 zookeeper 版本3.4.8 1.创建各个目录server1.server2.server3 2.复制解压后的zookeeper3.4.8 到server1 ...

  7. 初次使用Docker的体验笔记

    一.前言 Docker容器已经发布许久,但作为一名程序员如今才开始接触,实在是罪过--        在此之前,我还没有对Docker进行过深入的了解,对它的认识仍停留在:这是一种新型的虚拟机.这样的 ...

  8. db2 常用命令(一)

    DB2数据库常用命令小结   ========操作数据库命令==========   -- 启动数据库实例 #db2start    -- 停止数据库实例    #db2sto         # 如 ...

  9. JAVA中常用的二进制位操作

    一,计算某个正数的二进制表示法中 1 的个数 //求解正数的二进制表示法中的 1 的位数 private static int countBit(int num){ int count = 0; fo ...

  10. 移动web页面使用的字体的思考

    前言 记得做PC端页面的时候,字体一般设置为微软雅黑,现在做起移动端页面来了,设计师们一般都还把字体设置为微软雅黑字体,但是做出来后,测试的时候发现页面中的字体不是微软雅黑,怎么办? 后来了解到的手机 ...