Bootstrap Paginator是一款基于Bootstrap的js分頁插件，功能很豐富，個(gè)人覺得這款插件已經(jīng)無可挑剔了。它提供了一系列的參數(shù)用來支持用戶的定制，提供了公共的方法可隨時(shí)獲得插件狀態(tài)的改變，以及事件來監(jiān)聽用戶的動(dòng)作。目前經(jīng)過測試的瀏覽器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。
官網(wǎng)地址：http://bootstrappaginator.org/
DownloadVisit Project in GitHub
使用這個(gè)插件和使用其他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>
使用實(shí)例：
jsp代碼
<div class="padlr" align="right"> <ul id="data-pagination" class="pagination"> <li class="disabled"><a href="#">«</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="#">»</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, //變量名必須為currentPagetotalPages : data.totalPage, //變量名必須為totalPagesajaxOption: {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í)傳入一些定制參數(shù)，currentPage設(shè)置當(dāng)前頁碼，totalPages設(shè)置總頁數(shù)。
以上所述是小編給大家介紹的Bootstrap分頁插件之Bootstrap Paginator實(shí)例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
