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>

相關標籤/搜索