如何将 jQuery 省略号应用于 jQuery 数据表行答案

【问题标题】：How to apply jQuery ellipsis to jQuery datatable row如何将 jQuery 省略号应用于 jQuery 数据表行
【发布时间】：2012-01-20 11:50:10
【问题描述】：

我想将省略号 (...) 附加到数据表行的末尾（在此注释列中）。为此，我添加了 jQuery ellipsis js。我应该如何为 jQuery 数据表行指定高度，以便它只显示 2 行。现在高度是根据文本长度调整的。

这是我的 jQuery 表

<div id="comments">
 <c:choose>
 <c:when test="${null ne comments and not empty comments}">
  <table id="dataTable2" cellpadding="0" cellspacing="0" border="0" class="display" style="width:100%;">
    <thead><tr><th>Id</th>
        <th width="15%">User</th> 
        <th width="15%">Role</th>       
        <th width="45%">Comment</th></tr></thead>
    <tbody>
        <c:forEach items="${comm}" var="comm" varStatus="status">
            <tr><td>${comment.commentId}</td>
            <td width="15%">${comm.userFullName}</td>
            <td width="15%">${comm.userRoleName}</td>
            <td width="45%" style="height:20px" class="ellipsis multiline">${comm.CommentAbbreviation}</td></tr>
        </c:forEach>
    </tbody>
  </table>
 </c:when></c:choose>
</div>

jquery.autoellipsis.js

(function($) {
$.fn.ellipsis = function()
{
    return this.each(function()
    {
    var el = $(this);

        if(el.css("overflow") == "hidden")
        {
        var text = el.html();
        var multiline = el.hasClass('multiline');
        var t = $(this.cloneNode(true))
                .hide()
                .css('position', 'absolute')
                .css('overflow', 'visible')
                .width(multiline ? el.width() : 'auto')
                .height(multiline ? 'auto' : el.height());

el.after(t);

function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };

var func = multiline ? height : width;

while (text.length > 0 && func())
{
        text = text.substr(0, text.length - 1);
        t.html(text + "...");
}

el.html(t.html());
t.remove();
            }
        });
};
})(jQuery);

css类

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
}

.ellipsis.multiline {
        white-space: normal;
}

我应该如何设置数据表行的高度？

【问题讨论】：

标签： javascript jquery jquery-ui datatables

【解决方案1】：

这对我很有效

.dataTable th, .dataTable td {
max-width: 200px;
min-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

【讨论】：

这是迄今为止最好的方法。比 Op 的选择要好。所需要做的就是将这个类添加到 data-table.css 的末尾，并使类名类似于 .dataTable th.ellipsis、.dataTable td.ellipsis。然后将其添加到 "aoColumnDefs", { "sClass": "ellipsis", "aTargets": [ 2 ] } aTarget 2 是您想要应用省略号的列的索引。或 [ 0, 2, 5 ] 如果您想应用到您选择的多个列。
问题是它硬编码了每个单元格的宽度。每列需要根据其向下宽度做出反应。

【解决方案2】：

我找到了解决方案。这不是最正确的方法，但它有效。我将数据包装在一个 div 中，并修改了以下行。

<td width="45%" style="height:20px" class="ellipsis multiline">${comm.CommentAbbreviation}</td>

替换为

<td width="45%"><div class="ellipsis multiline" style="height: 35px;">${comm.CommentAbbreviation}</div></td>

【讨论】：

【解决方案3】：

对我有用

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

【讨论】：