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);

});

總結

以上是生活随笔為你收集整理的simplePagination API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。