bootstrap-paginator 分頁控件的使用

本文轉載自查看原文 2016-07-07 16:14 10349 前端

首先對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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 分頁插件--根據Bootstrap Paginator改寫的js插件 Bootstrap Paginator分頁插件+ajax 實現動態無刷新分頁 Django分頁器(paginator)組件 django Paginator 讓分頁變得完美基於Bootstrap仿淘寶分頁控件實現 AspNetPager分頁控件的使用 bootstrap中使用日歷控件 Bootstrap3 datetimepicker控件的使用 DevExpress的分頁Tab控件XtraTabControl控件的使用 Bootstrap分頁