Bootstrap分页插件：bootstrap-paginator

今天和大家分享一个Bootstrap的分页插件：bootstrap-paginator。

插件地址：

https://github.com/lyonlai/bootstrap-paginator

 

先看下目录结构

$bootstrap-paginator：代表插件解压后的根目录。

$bootstrap-paginator/build：插件压缩后的js文件，需要引入到项目中。

$bootstrap-paginator/css：插件用到的CSS文件存放目录。

$bootstrap-paginator/documentation：官网Demo的存放目录。

 

需要引入的文件：

<!-- 位于$bootstrap-paginator/css目录中 -->
<link href="../third-part/bootstrap-paginator/documentation.css" rel="stylesheet">
<!-- 位于$bootstrap-paginator/build目录中 -->
<script src="../third-part/bootstrap-paginator/bootstrap-paginator.min.js"></script>

 

分享下我的Demo源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

    <link href="../third-part/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../third-part/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../third-part/bootstrap-paginator/documentation.css" rel="stylesheet">

    <script src="../third-part/jQuery/jquery-2.2.4.js"></script>
    <script src="../third-part/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="../third-part/bootstrap-paginator/bootstrap-paginator.min.js"></script>

    <script>
        // 文档就绪函数开始
        $(function(){

          /*
           * 渲染分页组件
　　　　　　 */  
　　　　　　function perspPageBar(id){
                $("#" + id).bootstrapPaginator({
                    bootstrapMajorVersion: 3　　// 指定Bootstrap的版本，默认是Boostrap2，如果你用的是Boostrap3，则必须指定该值。
                    , currentPage: 1　　// 当前页码
                    , totalPages: 10　　// 总页数
                    , numberOfPages: 5　　// 显示页的数量
                    , useBootstrapTooltip: true　　// 使用Bootstrap提示样式
                    , itemContainerClass: function (type, page, current) {　　// 应用鼠标的手型光标
                        return (page === current) ? "active" : "pointer-cursor";
                    }
                    , onPageChanged: function(event, oldPage, newPage){　　// 页面改变时事件
　　　　　　　　　　　　　　// do something
                    }
                });
            }

            perspPageBar("pageBar");



        });
        // 文档就绪函数结束
    </script>

    <style>

    </style>

</head>
<body style="padding-top: 70px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>标签名</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="col-md-6 col-md-offset-3 text-center">
                <ul id="pageBar"></ul>
            </div>
        </div>
    </div>
</body>
</html>

以上只是基本的参数应用，如果想了解更多的参数配置，可以参考下官网的Demo。

 

posted @ 2016-07-22 13:22  歪头杀的小三花  阅读(1158)  评论(0)  编辑  收藏  举报