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


    一個Bootstrap風格的分頁控件,對於喜歡Bootstrap簡潔美觀和扁平化的同學可以關注jBootstrapPage, 目前jBootstrapPage最新版為V0.1,后續還有更多功能需要完善。

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

    

 代碼示例:

  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回調函數中完成。

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

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM