simplePagination API
simplePagination.js
一个简单的jQuery分页插件，主题和Bootstrap支持CSS 3
分页按钮样式
"light-theme"
"dark-theme"
"compact-theme"
下载地址
http://www.arungudelli.com/jquery/simple-pagination-using-jquery/
使用
Step 1: 添加js和css
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!-- JS -->
<script type="text/javascript" src="plug/simplePagination/tests/lib/jquery.min.js"></script>
<script type="text/javascript" src="plug/simplePagination/jquery.simplePagination.js"></script>
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="plug/simplePagination/simplePagination.css"/>
Step 2: 添加js代码
$(function(){
$("#paging2").pagination({
items: 100,
itemsOnPage: 10,
cssStyle: ‘dark-theme‘
});
});
Step 3: 添加样式
<style type="text/css">
a{text-decoration:none}
.page{margin:30px auto;width:620px}
</style>
Step 4: 添加div
<!--分页div-->
<div id="paging2" class="page"></div>
属性选项
|
属性 |
类型 |
默认值 |
备注 |
|
items |
Integer |
Default: 1 |
总条数 |
|
itemsOnPage |
Integer |
Default: 1 |
每页显示条数 |
|
pages |
Integer |
Optional |
强制设置分页的固定页数，这将使items和itemsOnPage属性失效。 |
|
displayedPages |
Integer |
Default: 5 |
开始隐藏页码的页数，默认5，最小为3 |
|
edges |
Integer |
Default: 2 |
How many page numbers are visible at the beginning/ending of the pagination. |
|
currentPage |
Integer |
Default: 1 |
当前页 |
|
hrefTextPrefix |
String |
Default: "#page-" |
悬停在页码时显示地址的页码前缀。http://xxxxx/test.html#前缀-1 |
|
hrefTextSuffix |
String |
Default: empty string |
悬停在页码时显示地址的页码后缀。http://xxxxx/test.html#page-1-后缀 |
|
prevText |
String |
Default: "Prev" |
上一页按钮显示文本 |
|
nextText |
String |
Default: "Next" |
下一页按钮显示文本 |
|
labelMap |
Array |
Default: empty array |
A collection of labels that will be used to render the pagination items, replacing the numbers. |
|
cssStyle |
String |
Default: "light-theme" |
分页按钮样式 |
|
selectOnClick |
Boolean |
Default: true |
Set to false if you don‘t want to select the page immediately after click. |
|
onPageClick(pageNumber, event) |
Function |
Optional |
页码点击事件调用函数，可选参数 |
|
onInit |
Function |
Optional |
Function to call when the pagination is initialized. |
方法
selectPage - 指定一个分页的页码
$(function() {
$("#paging2").pagination(‘selectPage‘, 3);
});
prevPage - Selects the previous page.
$(function() {
$("#paging2").pagination(‘prevPage‘);
});
nextPage - Select the next page.
$(function() {
$("#paging2").pagination(‘nextPage‘);
});
getPagesCount - 返回总页数
$(function() {
$("#paging2").pagination(‘getPagesCount‘);
});
getCurrentPage - 返回当前的页面.
$(function() {
$(selector).pagination(‘getCurrentPage‘);
});
disable - 禁用分页功能.
$(function() {
$("#paging2").pagination(‘disable‘);
});
enable - 解禁分页功能.
$(function() {
$("#paging2").pagination(‘enable‘);
});
destroy - 将分页破坏掉
$(function() {
$("#paging2").pagination(‘destroy‘);
});
redraw - 将分页破坏状态恢复
$(function() {
$("#paging2").pagination(‘redraw‘);
});
updateItems - 允许动态的修改总条数
$(function() {
$("#paging2").pagination(‘updateItems‘, 100);
});
updateItemsOnPage - 动态的修改总条数后恢复指定总条数
$(function() {
$("#paging2").pagination(‘updateItemsOnPage‘,100);
});
drawPage - 将当页的数据指定到指定页码
$(function() {
$("#paging2").pagination(‘drawPage‘, 2);
});