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版的、小号的、正常的、大号的。

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 示例:

$("#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的更多相关文章

  1. bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)

    html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div cl ...

  2. Bootstrap分页插件--Bootstrap Paginator

    开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件: & ...

  3. 如何使用前端分页框架bootstrap paginator

    前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能.在实现交互良好的页面翻页功能时,往往还需要配合使用后端分页框架pagehelper.pagehelper ...

  4. 基于bootstrap的分页组件-Bootstrap Paginator

    效果

  5. Bootstrap Paginator分页插件的使用

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

  6. Bootstrap Paginator 分页插件参数介绍及使用

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...

  7. Bootstrap Paginator分页插件

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

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

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

  9. 利用Bootstrap Paginator插件和KnockoutJS完成分页功能

    在最近一个项目中,需要结合一堆条件查询并对查询的结果数据完成一个简单分页功能,可是做着做着,自己的思路越来越模糊,做到心态崩溃!!! 哈哈,特此花点时间重新总结,并从最简单的分页,然后向多条件查询分页 ...

随机推荐

  1. X-MAS CTF 2018 - Crypto - Hanukkah

    参考链接 https://ctftime.org/task/7321 https://github.com/VoidHack/write-ups/tree/master/X-MAS%20CTF%202 ...

  2. git clone的低级错误

    犯了一个低级错误: server ip: 192.168.40.41 有一个git账户 所有的git仓库都在/home/git仓库下 比如/home/git/u-boot-2018.07-fmxx.g ...

  3. j函数 判断以 什么开头

    1.str.charAt(index) 返回字符串中指定位置的字符. str 是字符串  我们要将获得的数据 转化为字符串 var code = res.statusCode.toString(); ...

  4. Qt 倒计时验证码按钮效果

    本来还想继承QTimer跟QPushButton去实现,后来发现可以使用两个QTimer来实现: 验证码倒计时间:(60s) 封装到widget类里: 需要这几个数据:Button,TimerA,Ti ...

  5. JS自定义 Map

    <script>function HashMap(){this.map = {};}HashMap.prototype = { put : function(key, value){ th ...

  6. 怎么实现web端上传超大文件

    1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...

  7. ubuntu 18.04下Chromium设置为系统代理

    前言 在ubuntu 18.04下挂上ss后firefox能直接上google了但是chromium上不去 会出现下面两种情况 # This site can't be reached xxxxxx ...

  8. Android逆向之旅---解析编译之后的Resource.arsc文件格式

    一.前言 快过年了,先提前祝贺大家新年快乐,这篇文章也是今年最后一篇了.今天我们继续来看逆向的相关知识,前篇文章中我们介绍了如何解析Android中编译之后的AndroidManifest.xml文件 ...

  9. Codeforces Round #585 (Div. 2) E. Marbles (状压DP)

    题目:https://codeforc.es/contest/1215/problem/E 题意:给你一个序列,你可以交换相邻的两个数,要达到一个要求,所有相同的数都相邻,问你交换次数最少是多少 思路 ...

  10. POJ - 3481 splay板子

    Double Queue 默写splay板子 很多细节问题... #include<cstdio> #include<iostream> using namespace std ...