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