Bootstrap分页插件之BootstrapPaginator实例详解Bootstrap Paginator是⼀款基于Bootstrap的js分页插件，功能很丰富，个⼈觉得这款插件已经⽆可挑剔了。它提供了⼀系列的
参数⽤来⽀持⽤户的定制，提供了公共的⽅法可随时获得插件状态的改变，以及事件来监听⽤户的动作。⽬前经过测试的浏览器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。
使⽤这个插件和使⽤其他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 (alRow > 0) {
var options = {
currentPage : data.pageNumber, //变量名必须为currentPage
分页查询插件
totalPages : alPage, //变量名必须为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元素设置为分页组件，同时传⼊⼀些定制参数，currentPage设置当前页码，totalPages设置总页数。
以上所述是⼩编给⼤家介绍的Bootstrap分页插件之Bootstrap Paginator实例详解，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的，在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。