Bootstrap分頁外掛--Bootstrap Paginator
是一款基於Bootstrap的js分頁外掛，功能很豐富，個人覺得這款外掛已經無可挑剔了。它提供了一系列的引數用來支援使用者的定製，提供了公共的方法可隨時獲得外掛狀態的改變，以及事件來監聽使用者的動作。目前經過測試的瀏覽器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。
它的使用和其他Bootstrap內建的外掛一樣，需要引入如下檔案：
1.<link href="css/bootstrap.css" rel="stylesheet">
2.<script type="text/javascript"src="js/jquery-1.8.1.js"></script>
3.<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
注意：jquery要使用1.8版本以上的。
入門例項
效果：
程式碼
01.<div
id="example"></div>
02.<script
type='text/javascript'>
03.var options
= {
04.currentPage:
4,
05.totalPages:
10,
06.numberOfPages:5
07.}
08.
09.$('#example').bootstrapPaginator(options);
10.</script><span
style="font-family:'sans
serif, tahoma, verdana, helvetica';"><span
style="white-space:normal;">
</span></span>
只需要簡單的一句即可：$('#example').bootstrapPaginator(options)將id為'
元件結構
元件結構如上圖包括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 |
該引數是個js物件。當引數useBootstrapTooltip為true時，會將該物件傳給Bootstrap的bootstrap-tooltip.js外掛。 |
|
| onPageClicked | function | 為操作按鈕繫結click事件。回撥函式的引數：event, originalEvent, type,page。 | |
| onPageChanged | function | 為操作按鈕繫結頁碼改變事件，回撥函式的引數：event, oldPage, newPage。 |
公共命令
另外該外掛還提供了幾個公共的命令，可以通過如下方法呼叫，如：$('#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);