首页 > 代码库 > Bootstrap分页插件--Bootstrap Paginator
Bootstrap分页插件--Bootstrap Paginator
开源中国有一篇介绍的很详细，链接：https://my.oschina.net/shunshun/blog/204587
使用这个插件和使用其他Bootstrap内置的插件一样，需要引入如下文件：
<link href="http://www.mamicode.com/css/bootstrap.css" rel="stylesheet"><script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.8.1.js"></script><script type="text/javascript" src="http://www.mamicode.com/js/bootstrap-paginator.js"></script>
使用实例：
jsp代码
<div class="padlr" align="right"> <ul id="data-pagination" class="pagination"> <li class="disabled"><a href="http://www.mamicode.com/#">«</a></li> <li class="active"><a href="http://www.mamicode.com/#">1</a></li> <li><a href="http://www.mamicode.com/#">2</a></li> <li><a href="http://www.mamicode.com/#">3</a></li> <li><a href="http://www.mamicode.com/#">4</a></li> <li><a href="http://www.mamicode.com/#">5</a></li> <li><a href="http://www.mamicode.com/#">»</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元素设置为分页组件，同时传入一些定制参数，currentPage设置当前页码，totalPages设置总页数。
Bootstrap分页插件--Bootstrap Paginator
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。