bootstrap 分页详解

来源：互联网发布：qq聊天记录查询器软件编辑：程序博客网时间：2024/06/05 21:17

本文转载自：http://blog.csdn.net/u012316953/article/details/70232265

1.导入js,css样式文件，缺一不可，顺序不可乱

[html] view plain copy
<link rel="stylesheet" href="css/qunit-1.11.0.css">  
 <link rel="stylesheet" href="css/bootstrapv3.css">  
  
<script src="js/jquery-1.9.1.min.js"></script>  
<script src="js/bootstrap.min.js"></script>  
  
<script src="js/bootstrap-paginator.js"></script>  
<script src="js/qunit-1.11.0.js"></script>  

2.代码，options绝大数可选配置

[html] view plain copy
    <body>  
        <div id="alert-content"></div>  
        <div id="alert-content"></div>  
    <div>  
    <ul id='bp-3-element-test'></ul>  
</div>  
<script>  
         $(function(){  
   
  
            var element = $('#bp-3-element-test');  
  
            var options = {  
                bootstrapMajorVersion:3,  
                currentPage: 3,//当前页  
                numberOfPages: 5,//每次展示多少页  
                totalPages:11,//总页数  
                size:'small',//大小  
                alignment:'right',//位置  
                pageUrl: function(type, page, current){//访问连接  
                         return "#"+page;  
                    },  
                itemTexts: function (type, page, current) { //样式文字设置  
                    switch (type) {  
                    case "first":  
                        return "首页";  
                    case "prev":  
                        return "前一页";  
                    case "next":  
                        return "下一页";  
                    case "last":  
                        return "最后";  
                    case "page":  
                        return ""+page;  
                    }  
                },  
                shouldShowPage:function(type, page, current){//控制哪些显示，哪些隐藏  
                        switch(type)  
                        {  
                            case "first":  
                            case "last":  
                                return false;  //首页最后一页隐藏  
                            default:  
                                return true;  //其他显示  
                        }  
                 },  
                 tooltipTitles: function (type, page, current) { //提示框，当鼠标放上去给提示  
                        switch (type) {  
                        case "first":  
                            return "提示首页";  
                        case "prev":  
                            return "提示前页";  
                        case "next":  
                            return "Tooltip for next page";  
                        case "last":  
                            return "Tooltip for last page";  
                       
                        }  
                    },  
                useBootstrapTooltip:true,  
                  
                onPageClicked: function(e,originalEvent,type,page){  
                $('#alert-content').text("点击页数时，触发该函数, type: "+type+" page: "+page);  
                },  
                  
                onPageChanged: function(e,oldPage,newPage){  
                $('#alert-content').text("当页面改变时，触发该函数, old: "+oldPage+" new: "+newPage);  
            }  
                   
              
            }  
                   
              
  
            element.bootstrapPaginator(options);  
  
           
          
    });  
      
</script>  
  
  
  
    </body>  
</html>  

效果图

3.官方文档下载地址，包含英文文档，和所有文件

https://github.com/lyonlai/bootstrap-paginator

阅读全文

0 0