基于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>