How to apply jQuery ellipsis to jQuery datatable row

Question

I want to appends ellipsis (…) to the end of row of datatable(in this comment column). For this I have added jQuery ellipsis js. how should I specify height to jQuery data table row so that it only show 2 line. Right now height is adjusted according to length of text.

This is my jQuery table

<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 class

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

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

How should I set height to datatable row ?

Solution

This worked great for me

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

Comments

[like-a-trainee]

This is by far the best method. Better than the Op's choice. All that needs to be done is add this class to the end of data-table.css and make the class name something like .dataTable th.ellipsis, .dataTable td.ellipsis. Then add this to "aoColumnDefs", { "sClass": "ellipsis", "aTargets": [ 2 ] } aTarget 2 being the index of column you want to apply the ellipsis to of course. or [ 0, 2, 5 ] if you want to apply to multiple columns of your choice.

[user959690]

The problem is that it hardcodes the width for every cell. Each column needs to react based on its down width.