通用jQuery分页控件：jQuery Pagination plugin

 

简述

分页是项目中最常见的功能，熟练掌握一种分页控件，有利于提高我们的开发效率。
jQuery Pagination plugin是我用得比较顺手的一个分页控件，基于jQuery，Bootstrap风格。
官网地址：http://esimakin.github.io/twbs-pagination/
三个常用的CSS样式：

.pagination

.active

.disabled

可以设置为

pagination-sm

分页按钮小样式
示例：

Html代码：

<ul id="pagination-demo" class="pagination-sm"></ul>

JS代码：

$('#pagination-demo').twbsPagination({
totalPages: 35,
visiblePages: 7,
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page);
}
});

选项和事件

可用来设置的选项和默认值：

totalPages 必须设置，总页数

startPage 当前页，默认值：1

visiblePages 最大可见页数，默认值：5

initiateStartPageClick 在插件初始化时，触发点击事件，默认值：true

href 分页链接模板，默认值：false

hrefVariable 页面在模板中的变量名称，默认值：{{number}}

first text label 第一页名称：(default: ‘First’)

prev text label 首页名称：(default: ‘Previous’)

next text label 下一页(default: ‘Next’)

last text label 最后页(default: ‘Last’)

loop 是否开启循环效果（旋转木马） (default: false)

paginationClass 你可以设置自己的分页样式，这个样式是分页的根元素样式，默认值css样式: 

pagination

事件：

onPageClick 分页点击事件

参数

event 对象

page 分页数

使用示例

使用

href

自定义分页链接：

$(selector).twbsPagination({
totalPages: 35,
visiblePages: 8,
href: '?page={{number}}'
});

使用

visiblePages

设置10页可见：

$(selector).twbsPagination({
totalPages: 35,
visiblePages: 10,
});

同步分页效果

多个分页使用相同的类名可以实现分页同步的效果
自定义点击事件，链接模板，注意链接使用

?

开头，这样会重新加载真个页面，某些时候我们需要这样处理。

$(selector).twbsPagination({
totalPages: 15,
visiblePages: 5 ,
href: '?a=&page={{number}}&c=d' ,
onPageClick: function (event, page) {
$('#not-spa-demo-content').text('Page ' + page);
}
});

自定义点击事件，链接模板，注意使用

#

开头，不重新加载页面。

$(selector).twbsPagination({
totalPages: 15,
visiblePages: 5,
href: '#page={{pageNumber}}&c=d',
hrefVariable: '{{pageNumber}}',
onPageClick: function (event, page) {
...
}
});