simplePagination API

simplePagination API

 

simplePagination.js

一个简单的jQuery分页插件，主题和Bootstrap支持CSS 3

分页button样式

"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"	上一页button显示文本
nextText	String	Default: "Next"	下一页button显示文本
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"	分页button样式
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);

});