bootstrap 用省略号 超过
2016-01-08 21:21:51 u013025627 阅读数 14469

Bootstrap 分页

使用Bootstrap实现分页,并且当页码过多时使用省略号
源码下载

这里写图片描述


代码片段一(HTML主要部分)

<html style="padding-bottom: 54px;">
    <title>jquery</title>
    <script type="text/javascript">
        $(function(){
            $(".pagination").createPage({
                totalPage:30,
                currPage:14,
                backFn:function(p){
                    console.log("回调函数:"+p);
                }
            });
        })
</script>
</head>
<body>
    <div class="pagec" id="pagearea">
        <ul class="pagination">
        </ul>
    </div>
</body>
</html>

代码片段二(JavaScript)

(function($){
    var ms = {
        init:function(totalsubpageTmep,args){
            return (function(){
                ms.fillHtml(totalsubpageTmep,args);
                ms.bindEvent(totalsubpageTmep,args);
            })();
        },
        //填充html
        fillHtml:function(totalsubpageTmep,args){
            return (function(){
                totalsubpageTmep="";
                // 页码大于等于4的时候,添加第一个页码元素
                if(args.currPage!=1 && args.currPage>=4 && args.totalPage!=4) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+1+"</a></li>";
                }
                /* 当前页码>4, 并且<=总页码,总页码>5,添加“···”*/
                if(args.currPage-2>2 && args.currPage<=args.totalPage && args.totalPage>5) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
                }
                /* 当前页码的前两页 */
                var start = args.currPage-2;
                /* 当前页码的后两页 */
                var end = args.currPage+2;

                if((start>1 && args.currPage<4) || args.currPage==1) {
                    end++;
                }
                if(args.currPage>args.totalPage-4 && args.currPage>=args.totalPage) {
                    start--;
                }
                for(; start<=end; start++) {
                    if(start<=args.totalPage && start>=1) {
                        totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+start+"</a></li>";
                    }
                }
                if(args.currPage+2<args.totalPage-1 && args.currPage>=1 && args.totalPage>5) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
                }

                if(args.currPage!=args.totalPage && args.currPage<args.totalPage-2 && args.totalPage!=4) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+args.totalPage+"</a></li>";
                }
                $(".pagination").html(totalsubpageTmep);
            })();
        },
        //绑定事件
        bindEvent:function(totalsubpageTmep,args){
            return (function(){
                totalsubpageTmep.on("click","a.geraltTb_pager",function(event){
                    var current = parseInt($(this).text());
                    ms.fillHtml(totalsubpageTmep,{"currPage":current,"totalPage":args.totalPage,"turndown":args.turndown});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function(options){       
        ms.init(this,options);
    }
})(jQuery);
2016-12-20 17:45:26 u012157999 阅读数 23118

bootstrap ellipsis的使用

        当表格的内容过多的时候,需要把过长的内容用省略号代替;只要table加上style样式,td的style加上样式。

<TABLE  style="table-layout:fixed" class="table table-condensed table-bordered table-hover table-striped">
<td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">2223333333333333333333333</td>


最终效果如下图所示:

2017-05-17 16:04:54 qq_31164127 阅读数 21201

首先 ,bootstrap中当td内容超过我给的固定宽度时,省略号代替的代码如下:

<table class="table table-bordered">
      <thead>
          <tr>
             <th class="center" style='width:38%;'>商品名称</th>
             <th class="center" style='width:36%;'>详细介绍</th>
             <th class="center" style='width:22%;'>购买数量</th>
          </tr>
      </thead>
      <tbody id="tbody">
         <tr>
            <td>自由行机票享超值优惠</td>
            <td>随心所欲安排行程</td>
            <td>70</td>
        </tr>
        <tr>
            <td>自由行机票享超值优惠</td>
            <td>随心所欲安排行程</td>
            <td>70</td>
        </tr>      
        <tr>
            <td>自由行机票享超值优惠</td>
            <td>随心所欲安排行程</td>
            <td>70</td>
        </tr>                       
      </tbody>                             
 </table>
.table tbody tr td{
      overflow: hidden; 
      text-overflow:ellipsis;  
      white-space: nowrap; 
 }

移动端模拟器显示效果是这样的。不是很舒服,完全没按我给他的宽度显示,全靠内容挤出来的。
这里写图片描述
解决方法:

第1种

<table class="table table-bordered" style='table-layout:fixed;'>

也就是添加样式

table{
  table-layout:fixed;
}

效果出现:
这里写图片描述

table-layout用来显示表格单元格、行、列的算法规则。值 描述

automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。

第2种

在想要限制宽度的td种添加一个div包裹内容,并给div 限制宽度实现省略号展示。

2017-03-24 15:29:37 u012477420 阅读数 1190

在前端展示页面列表时,下方会有分页控件,当列表数量比较多时,我们希望在分页控件中加入省略号以方便页面展示,下面基于Bootstrap的pagination来实现这一功能。

/**
 * 获取分页
 * @param totalPage  页码总量
 * @param currentPage 当前页码
 * @returns {String}
 */
function getPagination(totalPage, currentPage){
	
	var paginationInfo = "<ul class=\"pagination\" >"+
	                     "<li><a href=\"javascript:void(0);\" " +
	                     " onclick=\"refreshPages("+totalPage+" , "+(currentPage-1)+
	                     ")\""+">«</a></li>";
	
	if(totalPage<=10){
		for(var i=1; i<=totalPage; i++){
			paginationInfo += "<li><a href=\"javascript:void(0);\" " +
					" onclick=\"refreshPages("+totalPage+" , "+i+")\">"+i+"</a></li>";
		}
	}
	else{
		if(currentPage<=3){
			for(var i=1; i<=currentPage+2; i++){
				paginationInfo += "<li><a href=\"javascript:void(0);\" " +
				  " onclick=\"refreshPages("+totalPage+" , "+i+")\">"+i+"</a></li>";
			}
			paginationInfo += "<li><a href=\"#\">...</a></li>";
			paginationInfo += "<li><a href=\"javascript:void(0);\" " +
			  " onclick=\"refreshPages("+totalPage+" , "+totalPage")\">"+totalPage+"</a></li>";
		}else if(currentPage<=totalPage-5){
			paginationInfo += "<li><a href=\"javascript:void(0);\" " +
			  " onclick=\"refreshPages("+totalPage+" , "+1+")\">"+1+"</a></li>";
			
			paginationInfo += "<li><a href=\"#\">...</a></li>";
			for(var i=currentPage-1; i<=currentPage+2; i++){
				paginationInfo += "<li><a href=\"javascript:void(0);\" " +
				  " onclick=\"refreshPages("+totalPage+" , "+i+")\">"+i+"</a></li>";
			}
			paginationInfo += "<li><a href=\"#\">...</a></li>";
			paginationInfo += "<li><a href=\"javascript:void(0);\" " +
			  " onclick=\"refreshPages("+totalPage+" , "+totalPage+")\">"+totalPage+"</a></li>";
		}else{
			paginationInfo += "<li><a href=\"javascript:void(0);\" " +
			  " onclick=\"refreshPages("+totalPage+" , "+1+")\">"+1+"</a></li>";
			paginationInfo += "<li><a href=\"#\">...</a></li>";
			for(var i=currentPage-1; i<=totalPage; i++){
				paginationInfo += "<li><a href=\"javascript:void(0);\" " +
				  " onclick=\"refreshPages("+totalPage+" , "+i+")\">"+i+"</a></li>";
			}
		}
	}
	
	paginationInfo += "<li><a href=\"javascript:void(0);\" " +
                      " onclick=\"refreshPages("+totalPage+" , "+(currentPage+1)+")\""+">»</a></li>";
	
	return paginationInfo;
}


getPagination函数的作用是根据页码总数与当前页确定分页的样式,当总页数小于10时,不用加省略号;否则,根据当前页与总页码的相对关系决定如何添加省略号。

function refreshPages(totalPage, currentPage){
	
	if(currentPage<1 || currentPage>totalPage){
		return;
	}
	
	var paginationInfo = getPagination(totalPage, currentPage);
	document.getElementById('pagination').innerHTML=paginationInfo;
}

分页的每一个页调用refreshPages函数用来刷新页码。

最终的效果如图所示:





2018-08-14 18:59:43 qq_34752068 阅读数 1445

table效果:
这里写图片描述
源码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
    <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    <style>
        .table>tfoot>tr>td {
            border-bottom: 1px solid #ddd;
        }

        th {
            text-align: left;
            padding-left: 15px !important;
            background-color: #019297;
            color: #fff !important;
            border-bottom: none !important;
            line-height: 29px !important;
        }
    </style>
</head>

<body>
    <div style="width: 200px;height: 300px;">
        <table style=" table-layout:fixed" class="table table-bordered">
            <th width="10%">Title01</th>
            <th width="20%">Title02</th>
            <!--  其他th -->
            <c:foreach items="" var="" varStatus=""></c:foreach>
            <tr>


                <td style="overflow:hidden; white-space:nowrap">这是title01的内容</td>
                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容</td>
                <!--  other td   -->

            </tr>
            <tr>


                <td style="overflow:hidden; white-space:nowrap">这是title01的内容</td>
                <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容这是title02的内容</td>
                <!--  other td   -->

            </tr>
            </c:foreach>
        </table>
    </div>
</body>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>

</html>
没有更多推荐了,返回首页