jQuery分頁插件jBootstrapPage，一個Bootstrap風格的分頁插件

時間 2019-11-25

標籤 jquery 分頁插件 jbootstrappage 一個 bootstrap 風格欄目 JQuery 简体版

原文原文鏈接

　　　　一個Bootstrap風格的分頁控件，對於喜歡Bootstrap簡潔美觀和扁平化的同窗能夠關注jBootstrapPage，目前jBootstrapPage最新版爲V0.1，後續還有更多功能須要完善。javascript

　　　　demo演示地址: http://www.it175.cn/demo/jBootstrapPage/css

　代碼示例:

　　html代碼html

 
  <html>
<head>
    <link href="jBootsrapPage.css" rel="stylesheet" />
  <script src="jquery-1.10.2.min.js"></script>
  <script src="jBootstrapPage.js"></script>
</head>
<body>
    <div>
        <ul class="pagination"></ul>
    </div>
<body>
</html> 
 

javascript代碼調用

　　每頁顯示多少條數據(pageSize),顯示多少個分頁按鈕(buttons),傳入數據總行數(total)便可，若是須要在選中某一頁，而後去請求服務器端，能夠在onPageClicked回調函數中完成。java

<script type="text/javascript">
$(function(){
    createPage(10, 13, 150);

    function createPage(pageSize, buttons, total) {
        $(".pagination").jBootstrapPage({
            pageSize : pageSize,
            total : total,
            maxPageButton:buttons,
            onPageClicked: function(obj, pageIndex) {
                alert((pageIndex+1)+'頁');
            }
        });
    }
});
</script>

源碼下載地址：https://github.com/wangwei123/jBootstrapPagejquery