Bootstrap Paginator是一款基於Bootstrap的js分頁插件，功能很豐富，個人覺得這款插件已經無可挑剔了。它提供了一系列的參數用來支持用戶的定 制，提供了公共的方法可隨時獲得插件狀態的改變，以及事件來監聽用戶的動作。目前經過測試的瀏覽器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。
GitHub 官網地址：https://github.com/lyonlai/bootstrap-paginator
參數介紹：
| 參數名 | 數據類型 | 默認值 | 描述 |
|---|---|---|---|
| bootstrapMajorVersion | number | 2 | 搭配使用的Bootstrap版本，2.X 的 分頁必須使用div元素，3.X分頁的必須使用ul元素。請注意與所使用的bootstrap版本對應上。 |
| 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, 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 = {
alignment:
"center"
,
//居中顯示
currentPage: pageIndex,
//當前頁數
totalPages: total,
//總頁數 注意不是總條數
pageUrl:
function
(type, page, current){
if
(page==current) {
return
"javascript:void(0)"
;
}
else
{
return
"/Articles?pageSize=15&pageIndex="
+page;
}
}
}
$(
"#pagintor"
).bootstrapPaginator(options);
// $("#pagintor") Bootstrap 是2.X 使用div元素，3.X使用ul元素
|
注意：分頁樣式用BootStrap 的，如果單獨使用，請去BootStrap中把分頁樣式拷出來。jQuery版本需要1.8及以上。