溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么使用bootstrap-paginator分頁插件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
首先我們需要了解什么是Bootstrap框架，對于這個我們之前有過講解，不了解的小伙伴可以在Bootstrap 教程中進行學習和了解。
一、參數介紹
| 參數名稱 | 數據類型 | 默認值 | 描述 |
|---|---|---|---|
| bootstrapMajorVersion | number | 2 | 搭配使用的bootstrap版本，如果bootstrap的版本是2.X的分頁必須使用div元素。3.X分頁的必須使用ul>li元素。注意與bootstrap版本對應上。 |
| size | string | "normal" | 設置控件的顯示大小，允許的值：mini，small，normal，large。 |
| alignment | string | "left" | 設置控件的對齊方式，允許的值：left，center，right。 |
| 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://baidu.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-tooltip插件。 |
| onPageClicked | function | 無 | 為操作按鈕綁定click事件。 參數：event, originalEvent, type,page。 |
| onPageChanged | function | 無 | 為操作按鈕綁定頁碼改變事件。 參數：event, oldPage, newPage。 |
在這個參數中紅色標記的是我們需要必選的一個參數
二、公共命令
| 命令名 | 參數 | 返回值 | 描述 |
|---|---|---|---|
| show | page | 無 | show命令用于直接跳轉到特定的page，與直接點擊操作按鈕的效果是一樣的。 使用方法：$('#example').bootstrapPaginator("show",3) 直接跳轉到第3頁， $('#example').bootstrapPaginator("show",100)直接跳轉到100頁。 |
| showFirst | 無 | 無 | showFirst 命令用于直接跳轉到首頁，與點擊first按鈕相同。 使用方法：$('#example').bootstrapPaginator("showFirst") |
| showLast | 無 | 無 | showFirst 命令用于直接跳轉到最后一頁，與點擊last按鈕相同。 使用方法：$('#example').bootstrapPaginator("showLast") |
| showPrevious | 無 | 無 | showPrevious 命令用于直接跳轉到上一頁。 使用方法：$('#example').bootstrapPaginator("showPrevious") |
| showNext | 無 | 無 | showNext命令用于直接跳轉到下一頁。 使用方法：$('#example').bootstrapPaginator("showNext") |
| getPages | 無 | object | getPages命令用于返回當前控件中顯示的頁碼，以數組形式返回。 使用方法：var arra = $('#example').bootstrapPaginator("getPages") |
| setOptions | object | 無 | setOptions 命令用于重新設置參數。 使用方法：$('#example').bootstrapPaginator("setOptions",newoptions) |
參照上面的命令中我們來看看下面的例子，如下所示：
$('#example').bootstrapPaginator("show",3) 在這個命令中我們可以知道這邊調用的是show命令；$('#example').bootstrapPaginator("getPages") 調用的是getPages命令
三、事件
| 事件名 | 回調函數 | 描述 |
|---|---|---|
| page-clicked | function(event，originalEvent，type，page){} | 參數event, originalEvent是倆個jquery事件對象，可參考jquery相關文檔 |
| page-changeed | function(event, oldPage, newPage) | 同上文 |
對于Bootstrap Paginator 事件來說這邊為我們提供了兩個事件分別是：page-clicked和page-changed。而且這兩個事件作為參數使用分別對應的是 onPageClicked和onPageChanged，如上所示。
四、Demo
下面我們來看看有關的一個頁面代碼吧，如下所示：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<table class="table table-border table-hover">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="page">
<ul class="pagination"></ul>
</div>
<script type="text/template" id="tableTemp">
<%for(let i = 0; i < item.length; i++){%>
<tr>
<td><%=(item[i].page * item[i].pageSize )+ i + 1%></td>
<td><%=item[i].name%></td>
<td><%=item[i].gender%></td>
<td><%=item[i].age%></td>
</tr>
<%}%>
</script>
</body>
</html>
<!--使用bootstrap插件必須使用引入jquery,因為bootstrap是基于jquery開發的-->
<script src="./lib/jquery-2.1.1.min.js"></script>
<!--bootstrap插件-->
<script src="./lib/bootstrap.js"></script>
<!--分頁插件-->
<script src="./lib/bootstrap-paginator.js"></script>
<!--模板插件-->
<script src="./lib/template-native.js"></script>
<script>
let currentPage = 1;
let pageSize = 3;
function render() {
$.ajax({
url: "./setPage.php",
data: {
page: currentPage,
pageSize: pageSize
},
dataType: "json",
success: function (result) {
// 將數據渲染到頁面
$("tbody").html(template("tableTemp",{item:result}))
// 調用分頁函數.參數:當前所在頁, 總頁數(用總條數 除以 每頁顯示多少條,在向上取整), ajax函數
setPage(currentPage, Math.ceil(result[0].size/pageSize), render)
}
})
}
render()
/**
*
* @param pageCurrent 當前所在頁
* @param pageSum 總頁數
* @param callback 調用ajax
*/
function setPage(pageCurrent, pageSum, callback) {
$(".pagination").bootstrapPaginator({
//設置版本號
bootstrapMajorVersion: 3,
// 顯示第幾頁
currentPage: pageCurrent,
// 總頁數
totalPages: pageSum,
//當單擊操作按鈕的時候, 執行該函數, 調用ajax渲染頁面
onPageClicked: function (event,originalEvent,type,page) {
// 把當前點擊的頁碼賦值給currentPage, 調用ajax,渲染頁面
currentPage = page
callback && callback()
}
})
}
</script>關于“怎么使用bootstrap-paginator分頁插件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
