Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作。浏览器兼容性: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。

1.引入css和js文件

注意:分页样式用BootStrap 的,如果单独使用,请去BootStrap中把分页样式拷出来。jQuery版本需要1.8及以上。

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-paginator/bootstrap-paginator.min.js"></script>

2.html 把下面的分页盒子放到table下面

<!-- $("pagination")的使用:Bootstrap 是2.X版本使用div元素,3.X版本使用ul元素,本项目使用的bootstrap3.7 -->
<nav class="text-right"> <!--text-right 右对齐,bootstrap中样式-->
<ul class="pagination"></ul>
</nav>

3.初始化分页--渲染数据后调用分页方法将获取的data传进来方便计算分页

//分页功能
var setPaginator = function (data) {
$('.pagination').bootstrapPaginator({
bootstrapMajorVersion: 3, //对应bootstrap版本
size: 'small', //分页大小
currentPage: data.page, //当前页
numberOfPages: 3, //显示的页数
totalPages: Math.ceil(data.total / data.size), // 总页数
/**
* 分页点击事件
* @param event [jquery对象]
* @param originalEvent [dom原生对象]
* @param type [按钮类型]
* @param page [点击按钮对应的页码]
*/
onPageClicked: function (event, originalEvent, type, page) {
render(page);//根据点击页数渲染页面
}
})
};

4.备注

4.1 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator

4.2 PaginatorAPI文档

参数介绍:

参数名

数据类型

默认值

描述

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)

同上文

一款基于Bootstrap的js分页插件bootstrap-paginator使用实例的更多相关文章

  1. Bootstrap的js分页插件属性介绍

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

  2. 分页插件 Bootstrap Paginator

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

  3. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  4. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  5. bootstrap-paginator分页插件的简单使用实例

    Document 21:36:40 简述:bootstrap-paginator是一款基于bootstrap的jQuery分页插件. githup项目地址:https://github.com/lyo ...

  6. Bootstrap分页插件--Bootstrap Paginator

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

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

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

  8. 基于VUE2.0的分页插件(很好用,很简单)

    基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来. 下载解压的主要目 ...

  9. Jquery.Page.js 分页插件的使用

    1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...

随机推荐

  1. mac USB串口工具配置

     安装USB serial 驱动 我的usb serial芯片是 pl2303, 先到官网上下载对应驱动,并安装.安装完成之后会要求重启. http://www.prolific.com.tw/adm ...

  2. asp.net html 单击按钮弹出下拉框效果

    1.说明 需要引用jquery.js文件,我的页面是在asp.net MVC4 添加的web窗体,其他不多说 直接看代码 2.代码 <%@ Page Language="C#" ...

  3. Dropout: A Simple Way to Prevent Neural Networks fromOverfitting

    https://www.cs.toronto.edu/~hinton/absps/JMLRdropout.pdf Deep neural nets with a large number of par ...

  4. 在MFC中使用大漠插件

    打开Class Wizard,Add Class...->MFC Class From TypeLib... File->Location->>> Finish-> ...

  5. mongodb学习之:数据库命令以及固定集合

    如何我们要删除一个集合,可以采用db.test.drop()的方式,其实在这背后,这个函数运行的是drop命令.可以用runCommand达到同样的效果. 我们首先新建一个集合作为测试使用: > ...

  6. emoji字符不能插入MySQL数据库,提示“'\xF0\x9F\x98\x84' for column 'XXXX' at row 1”

    从网络中取下的数据解析后不能插入数据库,提示某个字段有问题,问题提示如下: SQLException: Incorrect string value: '\xF0\x9F\x98\x84' for c ...

  7. Jquery AJAX如何使用Promise/Deferred实现顺序执行?

    有的时候有我有N个AJAX请求,第下个请求可能要依赖上个请求的返回值, 可以用 $.ajax("test1.php").then(function(data) { // data ...

  8. 解决Error:Unable to find method 'org.gradle.api.internal.project.ProjectInternal.

    错误描述今天在Github上面下载了一份代码,然后导入到Android Studio中直接报错误 错误描述如下: Error: Unable to find method ‘org.gradle.ap ...

  9. extjs grid renderer参数用法

    今天在导出EXT的二维时老是报错,追进去看是renderer : function(value)的参数不对,经过一番研究,未免以后遇到再次浪费时间,记录一下. var cm = new Ext.gri ...

  10. LR添加Windows和Linux压力机实战

    添加Windows和Linux压力机实战 既然Controller是LoadRunner的“心脏”,那么压力产生也必然是它发起的,通过压力机来对被测系统产生压力.一般压力机分为Windows和Linu ...