bootstrapPaginator 分頁器

標籤：strong   get   調用   瀏覽器   傳回值   option   https   inf   last   

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。

 

例如：

 

bootstrapPaginator 分頁器