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