bootstrap-paginator 分页控件的使用

首先对js和css的引用

初始化分页控件

　　<div id="page"></div>
　　<script type="text/javascript">
       $(function(){
           var options={
               bootstrapMajorVersion:1,   //版本
               currentPage:1,   //当前页数
               numberOfPages:5,   //最多显示Page页
               totalPages:10,   //所有数据可以显示的页数
               onPageClicked:function(e,originalEvent,type,page){

               }
           }
           $("#page").bootstrapPaginator(options);
       })
   </script>

如果bootstrapMajorVersion:1 时，则上面的分页标签用 div

如果bootstrapMajorVersion:3 时，则上面的分页标签用 ul

其中：currentPage 是当前你所在的页数　　numberOfPages 是分页按钮可见的最多数　　totalPages 是所有数据能分的页数（这些 options（选项）是在初始化分页控件的时候使用的。）

在onPageClicked 事件中 page 参数标识你点击页数时所在的页数。

完整代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> 
    <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
</head>
<body>
    <div id="page"></div>

    <script type="text/javascript">
        $(function(){
            var options={
                bootstrapMajorVersion:1,    //版本
                currentPage:1,    //当前页数
                numberOfPages:5,    //最多显示Page页
                totalPages:10,    //所有数据可以显示的页数
                onPageClicked:function(e,originalEvent,type,page){
                    console.log("e");
                    console.log(e);
                    console.log("originalEvent");
                    console.log(originalEvent);
                    console.log("type");
                    console.log(type);
                    console.log("page");
                    console.log(page);
                }
            }
            $("#page").bootstrapPaginator(options);
        })
    </script>
</body>
</html>