bootstrap-paginator 分页控件的使用

时间 2019-11-19

标签 bootstrap paginator 分页控件使用栏目 Bootstarp 繁體版

原文原文链接

首先对js和css的引用javascript

初始化分页控件html

　　<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){java

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

若是bootstrapMajorVersion:1 时，则上面的分页标签用 divbootstrap

若是bootstrapMajorVersion:3 时，则上面的分页标签用 ulspa

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

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

完整代码以下：blog

<!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>