bootstrap 分页详解

最新推荐文章于 2024-06-09 18:06:43 发布

左沩

最新推荐文章于 2024-06-09 18:06:43 发布

阅读量1w

点赞数 1

分类专栏：前台

本文链接：https://blog.csdn.net/u012316953/article/details/70232265

版权

前台专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

    <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绝大数可选配置

	<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

左沩

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 分页详解

1.导入js,css样式文件，缺一不可，顺序不可乱 2.代码，options绝大数可选配置 $(function(){ var element = $('#bp-3-element-test'); var options
复制链接

扫一扫

专栏目录