基于bootstrap动态分页

bootstrap本身的分页有分页组件 但是却是静态的,无法满足要求,分页必须根据当前的总页数来展示

使用插件bootstrap-paginator

github下载地址 https://github.com/lyonlai/bootstrap-paginator.git

下载下来后解压,打开发现是一堆文件,不要急,有用的就几个:

1. src目录的bootstrap-paginator.js 拷贝到自己的项目里面去
2. 打开documentation里面的index.html 这个是说明文档, 里面有很多例子 照着来就行了

开始需要引入依赖文件

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-paginator.min.js"></script> <div id="example"></div>
<script type='text/javascript'>
var options = {
currentPage: 3,
totalPages: 10
} $('#example').bootstrapPaginator(options);
</script>

下面放一个我自己用过的 其中总页数 总套数 当前页数都是从后端php传过来的

<link href="/themes/lib/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/themes/lib/jquery/jquery-3.3.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/themes/lib/bootstrap-3.3.7/js/bootstrap.min.js"></script><div style="text-align: right"> <ul id="pageLimit"></ul> </div>
<script>
//分页
$('#pageLimit').bootstrapPaginator({
currentPage: <?php echo $data['page']; ?>,//当前的请求页面。
totalPages: <?php echo $data['total_rows']; ?>,//一共多少页。
size:"normal",//应该是页眉的大小。
bootstrapMajorVersion: 3,//bootstrap的版本要求。
alignment:"right",
totalPages:<?php echo $data['total_page']; ?>,
useBootstrapTooltip:false,
numberOfPages:5,//一页列出多少数据。
tooltipTitles: function (type, page, current) {
switch (type) {
case "first":
return "";
case "prev":
return "";
case "next":
return "";
case "last":
return "";
case "page":
return '';
}
},
itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
pageUrl: function(type, page, current){
return "/admin/articles/index?page="+page; }
});
</script>