• bootstrap-paginator 分页控件的使用


    首先对js和css的引用

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

    初始化分页控件

      <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>
  • 相关阅读:
    iOS启动项目(二)引入第三方库
    Swift技巧(九)CGImage To CVPixelBuffer
    Swift技巧(四)设置照片尺寸和格式
    Swift技巧(十) Protocol 的灵活使用
    Alamofire5.0.0 以上报错
    Swift技巧(八)CVPixelBuffer To CGImage
    Swift技巧(十一)重写运算符
    Swift技巧(五)设置圆角的代码
    Swift技巧(七)重识 Array
    Swift技巧(六)设置按钮状态并更改
  • 原文地址:https://www.cnblogs.com/sthu/p/10605694.html
Copyright © 2020-2023  润新知