Bootstrap分页插件之Bootstrap Paginator实例详解

Bootstrap Paginator是一款基于Bootstrap的js分页插件，功能很丰富，个人觉得这款插件已经无可挑剔了。它提供了一系列的参数用来支持用户的定制，提供了公共的方法可随时获得插件状态的改变，以及事件来监听用户的动作。目前经过测试的浏览器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。
官网地址：http://bootstrappaginator.org/
DownloadVisit Project in GitHub
使用这个插件和使用其他Bootstrap内置的插件一样，需要引入如下文件：

<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="#">«</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元素设置为分页组件，同时传入一些定制参数，currentPage设置当前页码，totalPages设置总页数。
以上所述是小编给大家介绍的Bootstrap分页插件之Bootstrap Paginator实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！