快捷導(dǎo)航

Bootstrap分頁插件之Bootstrap Paginator實例詳解

更新時間：2016年10月15日 09:14:03 作者：細雨落花

Bootstrap Paginator是一款基于Bootstrap的js分頁插件，功能很豐富，個人覺得這款插件已經(jīng)無可挑剔了，感興趣的朋友跟著腳本之家小編一起學習吧

Bootstrap Paginator是一款基于Bootstrap的js分頁插件，功能很豐富，個人覺得這款插件已經(jīng)無可挑剔了。它提供了一系列的參數(shù)用來支持用戶的定制，提供了公共的方法可隨時獲得插件狀態(tài)的改變，以及事件來監(jiān)聽用戶的動作。目前經(jīng)過測試的瀏覽器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。

官網(wǎng)地址：http://bootstrappaginator.org/

DownloadVisit Project in GitHub

使用這個插件和使用其他Bootstrap內(nèi)置的插件一樣，需要引入如下文件：

<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

使用實例：

jsp代碼

<div class="padlr" align="right">
　　<ul id="data-pagination" class="pagination">
　　<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>

js代碼

var pageNumber = 1;
var pageSiza = 10;
function getData() {
$.post("url", {
dataId : dataId,
currentPage: pageNumber,
pageSize : pageSize
}, function(data) {
if (data.totalRow > 0) {
var options = {
currentPage : data.pageNumber, //變量名必須為currentPage
totalPages : data.totalPage, //變量名必須為totalPages
ajaxOption: {
url: 'url',
pageSize: pageSize,
dataId : dataId,
appendElement: 'data-list',
templateId: 'tpl-data-list',
otherParams:{
}
},
}
$('#data-pagination').bootstrapPaginator(options);
var html = template("tpl-data-list", data);
$('#data-list').html(html);
} else {
$('#data-list').html("");
}
});
}

$('#data-pagination').bootstrapPaginator(options)就是將id為'data-pagination'的dom元素設(shè)置為分頁組件，同時傳入一些定制參數(shù)，currentPage設(shè)置當前頁碼，totalPages設(shè)置總頁數(shù)。

以上所述是小編給大家介紹的Bootstrap分頁插件之Bootstrap Paginator實例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的，在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: