1.先导入相关的 bootstrap 、jquery、bootstrap-paginator 相关 css+js 文件,本文后面提供百度云下载链接。
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="./js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="./js/bootstrap-paginator.js"></script>
2.在 body 标签里面写下以下代码:
<body>
<div style="text-align: right;">
<ul id='bp-3-element-test'></ul>
</div>
<script type="text/javascript">
$(function(){
var element = $('#bp-3-element-test');
var options = {
bootstrapMajorVersion:3, //bootstrap的版本要求
currentPage: 2, //设置当前页
numberOfPages: 5, //设置可以点击到的页数范围
totalPages:11 //设置总页数
// numberOfPages:5 //一页列出多少数据
}
element.bootstrapPaginator(options);
});
</script>
</body>
3.这样就行了,项目使用,请自行修改一些动态参数。以下是效果图:
4.下面是提供整个 bootstrap 的分页插件代码的百度云链接,下载后可直接预览,已经整理过,可读性强。
链接: https://pan.baidu.com/s/114GSiHCX2xtrLRUk1yL6qw 密码: a2k9