源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-07-04 05:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Bootstrap分页插件之Bootstrap Paginator实例详解
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了。它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作。目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。 官网地址:[url=http://bootstrappaginator.org/]http://bootstrappaginator.org/[/url] [url=https://github.com/lyonlai/bootstrap-paginator]DownloadVisit Project in GitHub[/url] 使用这个插件和使用其他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>
[img]http://files.jb51.net/file_images/article/201610/2016101591835377.png?201691591914[/img] [img]http://files.jb51.net/file_images/article/201610/2016101591958437.png?201691592015[/img] [img]http://files.jb51.net/file_images/article/201610/2016101592044476.png?20169159211[/img] [img]http://files.jb51.net/file_images/article/201610/2016101592130048.png?201691592339[/img] [img]http://files.jb51.net/file_images/article/201610/2016101592403563.png?201691592421[/img] 使用实例: 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, //变量名必须为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实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部