Bootstrap-分頁插件Paginator

Bootstrap Paginator是一款基於Bootstrap的js分頁插件，功能很豐富，我的以爲這款插件已經無可挑剔了。它提供了一系列的參數用來支持用戶的定製，提供了公共的方法可隨時得到插件狀態的改變，以及事件來監聽用戶的動做。目前通過測試的瀏覽器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。

官網地址：http://bootstrappaginator.org/

DownloadVisit Project in GitHub

它的使用和其餘Bootstrap內置的插件同樣，須要引入以下文件：

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

注意：jquery要使用1.8版本以上的。

入門實例

效果：

<div id="example"></div>
    <script type='text/javascript'>
        var options = {
            currentPage: 4,
            totalPages: 10,
        numberOfPages:5
        }

        $('#example').bootstrapPaginator(options);
    </script><span style="font-family:'sans serif, tahoma, verdana, helvetica';"><span style="white-space:normal;"> </span></span>

只須要簡單的一句便可：$('#example').bootstrapPaginator(options)將id爲'example'的dom元素設置爲分頁組件，同時傳入一些定製參數。currentPage設置當前頁碼，totalPages設置共多少頁，numberOfPages設置顯示的頁碼數。

組件結構

組件結構如上圖包括5中類型的操做按鈕，如：首頁(first)、尾頁(last)、上一頁(prev)、下一頁(next) 、以及頁(page)。固然這是默然的結構，咱們可經過參數對結構及樣式進行定製。

參數

參數名	數據類型	默認值	描述
size	string	"normal"	設置控件的顯示大小，是個字符串. 容許的值: mini, small, normal,large。值：mini版的、小號的、正常的、大號的。
alignment	string	"left"	設置控件的對齊方式，是個字符串， 容許的值用： left, center andright. 即：左對齊、居中對齊、右對齊。
itemContainerClass	function		該參數接收一個函數，返回一個字符串，該字符串是一個咱們自定義的class類樣式。當控件內的每一個操縱按鈕被渲染(render)時，都會調用該函數，同時把有關該按鈕的信息做爲參數傳入。參數：type,page, current 。type爲該控件的操做按鈕的類型，如上圖所示的五種類型：first、prev、page、next、last。page爲該按鈕所屬第幾頁。current 指示整個控件的當前頁是第幾頁。
currentPage	number	1	設置當前頁.
numberOfPages	number	5	設置控件顯示的頁碼數.即：類型爲"page"的操做按鈕的數量。
totalPages	number	1	設置總頁數.
pageUrl	function		實際上，控件內的每一個操做按鈕最終會被渲染成超連接，該參數的做用就是設置超連接的連接地址。該參數是個函數，參數爲：type,page, current。這樣咱們就能夠經過這個函數爲每一個操做按鈕動態設置連接地址。如："http://example.com/list/page/"+page
shouldShowPage	boolean/function	true	該參數用於設置某個操做按鈕是否顯示，但是個布爾值也但是個函數。當爲true時，顯示。當爲false時，不顯示。若是該參數是個函數，須要返回個布爾值，經過這個返回值判斷是否顯示。函數有3個參數: type, page, current。使用函數的好處是，能夠對每一個操做按鈕進行顯示控制。
itemTexts	function		控制每一個操做按鈕的顯示文字。是個函數，有3個參數: type, page, current。經過這個參數咱們就能夠將操做按鈕上的英文改成中文，如first-->首頁，last-->尾頁。
tooltipTitles	function		設置操做按鈕的title屬性。是個函數，有3個參數: type, page, current。
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事件。回調函數的參數：event, originalEvent, type,page。
onPageChanged	function		爲操做按鈕綁定頁碼改變事件，回調函數的參數：event,

公共命令
另外該插件還提供了幾個公共的命令，能夠經過以下方法調用，如：$('#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-clicked和page-changed。這倆個事件做爲參數使用，分別對應onPageClicked和onPageChanged。

事件名	回調函數	描述
page-clicked	function(event, originalEvent, type, page)	同上文。另外，參數event, originalEvent是倆個jquery事件對象，可參考jquery相關文檔
page-changed	function(event, oldPage, newPage)	同上文

 

 

 

另外，demo就不寫了，建議你們上官網，官網對於每一個參數、命令、事件 都提供了實例，在經過參考上面的文檔就比較好理解了。

var options = {
            currentPage: 3,
            totalPages: 10,
            pageUrl: function(type, page, current){                
                  return "http://example.com/list/page/"+page;
            }
        }

        $('#example').bootstrapPaginator(options);

在pageUrl方法下面就能夠寫action方法了，其中current參數就是當前點擊頁碼