免費(fèi)AI編程助手
我們?cè)谕ㄟ^(guò)簡(jiǎn)單的學(xué)習(xí)和了解之后，大概的對(duì)前端又來(lái)了不少的了解，那么對(duì)于開(kāi)發(fā)中的我們比較常用的是框架的運(yùn)用，那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于“如何使用bootstrap-paginator分頁(yè)插件？”這個(gè)問(wèn)題吧！下面是小編整理的內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助！
首先我們需要了解什么是Bootstrap框架，對(duì)于這個(gè)我們之前有過(guò)講解，不了解的小伙伴可以在Bootstrap 教程中進(jìn)行學(xué)習(xí)和了解。
一、參數(shù)介紹
| 參數(shù)名稱 | 數(shù)據(jù)類(lèi)型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| bootstrapMajorVersion | number | 2 | 搭配使用的bootstrap版本，如果bootstrap的版本是2.X的分頁(yè)必須使用div元素。3.X分頁(yè)的必須使用ul>li元素。注意與bootstrap版本對(duì)應(yīng)上。 |
| size | string | "normal" | 設(shè)置控件的顯示大小，允許的值：mini，small，normal，large。 |
| alignment | string | "left" | 設(shè)置控件的對(duì)齊方式，允許的值：left，center，right。 |
| itemContainerClass | function | 無(wú) |
該參數(shù)接收一個(gè)函數(shù)，返回一個(gè)字符串，該字符串是我們定義的一個(gè)class類(lèi)樣式。當(dāng)控件內(nèi)的每個(gè)操作按鈕被渲染（render）時(shí)，都會(huì)調(diào)用該函數(shù)，同時(shí)把有關(guān)該按鈕的信息作為參數(shù)傳入。 參數(shù)：type，page，current。 type：該控件的操作按鈕的類(lèi)型。（first、prev、page、 next、last） page：該按鈕為第幾頁(yè)。 current：整個(gè)控件的當(dāng)前頁(yè)是第幾頁(yè)。 |
| currentPage | number | 1 |
設(shè)置當(dāng)前頁(yè)。 |
| numberOfPages | number | 5 |
設(shè)置控件顯示的頁(yè)碼數(shù)。即：類(lèi)型為“page”的操作按鈕數(shù)量。 |
| totalPages | number | 1 |
設(shè)置總頁(yè)數(shù)。 |
| pageUrl | function | 無(wú) |
實(shí)際上，控件內(nèi)的每個(gè)操作按鈕都會(huì)被渲染成超鏈接，這樣就可以為每個(gè)操作按鈕動(dòng)態(tài)設(shè)置鏈接地址。該參數(shù)是個(gè)函數(shù)，接受的參數(shù)為：type，page，current。 如："http://baidu.com/list/page/"+page |
| shouldShowPage | boolean/function | true |
該參數(shù)用于設(shè)置某個(gè)操作按鈕是否顯示，可是個(gè)布爾值也可是個(gè)函數(shù)。當(dāng)為true時(shí)，顯示。當(dāng)為false時(shí)，不顯示。如果該參數(shù)是個(gè)函數(shù)，需要返回個(gè)布爾值，通過(guò)這個(gè)返回值判斷是否顯示。 函數(shù)有3個(gè)參數(shù): type, page, current。 使用函數(shù)的好處是，可以對(duì)每個(gè)操作按鈕進(jìn)行顯示控制。 |
| itemTexts | function | 無(wú) |
控制每個(gè)操作按鈕的顯示文字。 為函數(shù)傳遞3個(gè)參數(shù): type, page, current。 通過(guò)這個(gè)參數(shù)我們就可以將操作按鈕上的英文改為中文。如first-->首頁(yè)，last-->尾頁(yè)。 |
| tooltipTitles | function | 無(wú) |
設(shè)置操作按鈕的title屬性。 傳遞3個(gè)參數(shù): type, page, current。 |
| useBootstrapTooltip | boolean | false |
設(shè)置是否使用Bootstrap內(nèi)置的tooltip。 true是使用，false是不使用,默認(rèn)是不使用。 注意：如果使用，則需要引入bootstrap-tooltip.js插件。 |
| bootstrapTooltipOptions | object | 無(wú) |
Default:{ animation: true, html: true, placement: 'top', selector: false, title: "", container: false } 該參數(shù)為js對(duì)象，當(dāng)參數(shù)useBootstrapTooltip（樓上那個(gè)）為true時(shí)，會(huì)將該對(duì)象傳給bootstrap-tooltip插件。 |
| onPageClicked | function | 無(wú) |
為操作按鈕綁定click事件。 參數(shù)：event , originalEvent , type ,page。 |
| onPageChanged | function | 無(wú) |
為操作按鈕綁定頁(yè)碼改變事件。 參數(shù)：event , oldPage , newPage。 |
在這個(gè)參數(shù)中紅色標(biāo)記的是我們需要必選的一個(gè)參數(shù)
二、公共命令
| 命令名 | 參數(shù) | 返回值 | 描述 |
|---|---|---|---|
| show | page | 無(wú) |
show命令用于直接跳轉(zhuǎn)到特定的page，與直接點(diǎn)擊操作按鈕的效果是一樣的。 使用方法：$('#example').bootstrapPaginator("show",3) 直接跳轉(zhuǎn)到第3頁(yè)， $('#example').bootstrapPaginator("show",100)直接跳轉(zhuǎn)到100頁(yè)。 |
| showFirst | 無(wú) | 無(wú) |
showFirst 命令用于直接跳轉(zhuǎn)到首頁(yè)，與點(diǎn)擊first按鈕相同。 使用方法：$('#example').bootstrapPaginator("showFirst") |
| showLast | 無(wú) | 無(wú) |
showFirst 命令用于直接跳轉(zhuǎn)到最后一頁(yè)，與點(diǎn)擊last按鈕相同。 使用方法：$('#example').bootstrapPaginator("showLast") |
| showPrevious | 無(wú) | 無(wú) |
showPrevious 命令用于直接跳轉(zhuǎn)到上一頁(yè)。 使用方法：$('#example').bootstrapPaginator("showPrevious") |
| showNext | 無(wú) | 無(wú) |
showNext命令用于直接跳轉(zhuǎn)到下一頁(yè)。 使用方法：$('#example').bootstrapPaginator("showNext") |
| getPages | 無(wú) | object |
getPages命令用于返回當(dāng)前控件中顯示的頁(yè)碼，以數(shù)組形式返回。 使用方法：var arra = $('#example').bootstrapPaginator("getPages") |
| setOptions | object | 無(wú) |
setOptions 命令用于重新設(shè)置參數(shù)。 使用方法：$('#example').bootstrapPaginator("setOptions",newoptions) |
參照上面的命令中我們來(lái)看看下面的例子，如下所示：
?$('#example').bootstrapPaginator("show",3)? 在這個(gè)命令中我們可以知道這邊調(diào)用的是?show?命令；?$('#example').bootstrapPaginator("getPages") ?調(diào)用的是?getPages?命令
三、事件
| 事件名 | 回調(diào)函數(shù) | 描述 |
|---|---|---|
| page-clicked | function(event，originalEvent，type，page){} | 參數(shù)event, originalEvent是倆個(gè)jquery事件對(duì)象，可參考jquery相關(guān)文檔 |
| page-changeed | function(event, oldPage, newPage) | 同上文 |
對(duì)于Bootstrap Paginator 事件來(lái)說(shuō)這邊為我們提供了兩個(gè)事件分別是：?page-clicked?和?page-changed?。而且這兩個(gè)事件作為參數(shù)使用分別對(duì)應(yīng)的是? onPageClicked?和?onPageChanged?，如上所示。
四、Demo
下面我們來(lái)看看有關(guān)的一個(gè)頁(yè)面代碼吧，如下所示：
<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>序號(hào)</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,因?yàn)閎ootstrap是基于jquery開(kāi)發(fā)的-->
<script src="./lib/jquery-2.1.1.min.js"></script>
<!--bootstrap插件-->
<script src="./lib/bootstrap.js"></script>
<!--分頁(yè)插件-->
<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) {
// 將數(shù)據(jù)渲染到頁(yè)面
$("tbody").html(template("tableTemp",{item:result}))
// 調(diào)用分頁(yè)函數(shù).參數(shù):當(dāng)前所在頁(yè), 總頁(yè)數(shù)(用總條數(shù) 除以 每頁(yè)顯示多少條,在向上取整), ajax函數(shù)
setPage(currentPage, Math.ceil(result[0].size/pageSize), render)
}
})
}
render()
/**
*
* @param pageCurrent 當(dāng)前所在頁(yè)
* @param pageSum 總頁(yè)數(shù)
* @param callback 調(diào)用ajax
*/
function setPage(pageCurrent, pageSum, callback) {
$(".pagination").bootstrapPaginator({
//設(shè)置版本號(hào)
bootstrapMajorVersion: 3,
// 顯示第幾頁(yè)
currentPage: pageCurrent,
// 總頁(yè)數(shù)
totalPages: pageSum,
//當(dāng)單擊操作按鈕的時(shí)候, 執(zhí)行該函數(shù), 調(diào)用ajax渲染頁(yè)面
onPageClicked: function (event,originalEvent,type,page) {
// 把當(dāng)前點(diǎn)擊的頁(yè)碼賦值給currentPage, 調(diào)用ajax,渲染頁(yè)面
currentPage = page
callback && callback()
}
})
}
</script>總結(jié)：
關(guān)于“如何使用bootstrap-paginator分頁(yè)插件？”這個(gè)問(wèn)題，相關(guān)的講解就到這里結(jié)束啦，如果你覺(jué)得有更好的解釋或者案例也可以和大家一同分享學(xué)習(xí)，更多有關(guān)于Bootstrap的相關(guān)內(nèi)容都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。
相關(guān)資料：
相關(guān)項(xiàng)目文件地址：https://github.com/lyonlai/bootstrap-paginator
兼容瀏覽器： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+
