CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

Truncate cell value with jQuery

I have a table that has 100% width. It is generated dynamically with values from my db. I need to truncate TH values if they do not fit in the table, without pushing the boundaries of the cell. If the value is truncated I'd like to add a link with ... and put the full length label into title tag. I don't need it to expand. Something like this:

<th>
   Long label<a href="javascript:void(0)" title="$myFullValue">...</a>
</th>

I'm not sure how to get the value of the string...

$("TH").width();
$("TH").val().width(); ??

I know there are some jQuery plugins out there but I was not able to find what I need and I thought I could try and give this project my own whirl.

http://jsfiddle.net/b3cQZ/3/

EDIT:

Just an idea that crossed my mind. Couldn't I wrap the label in tags and get it's width. At the same time get the width of the parent TH. If labe's width is greater, I could

  1. subtract, say 20 px (for ...) from TH width and,
  2. assign that width to span's width
  3. while adding overflow:hidden, and
  4. appending "..." to the span

Won't this work?

Upvotes: 2

Views: 1962

Answers (5)

pixelbobby
pixelbobby

Reputation: 4440

This solution uses a fixed value but if you're able to find a way to calculate the maxLength you could wrap this in a function and pass it the output as the maxLength.

FIDDLE http://jsfiddle.net/m72Ja/2/

HTML 

<table class="MyTable" border="1" width="400">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Long Long Long Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

JS 

$(document).ready(function() {
    $('.MyTable th').each(function() {
        var maxLength = 10;
        //if the value is greater than max length,      
        //cut the string to max length then add ...     
        if ($(this).text().length > maxLength) {
            $(this).text($(this).text().substring(0, maxLength));
            $(this).append($("<a href='javascript:void(0);' title='$myFullValue'>...</a>"));
        }
    });
});

Upvotes: 1

ek_ny
ek_ny

Reputation: 10243

This is a simplistic example based strictly on the number of characters in the cell. Wouldn't be necessary if there was long line of text with spaces because text would most likely wrap.

$("TH").each(function(){//loop over cells
  var that = $(this);//placeholder for cell
   if(that.html().length > [some value]){//test length of html
     var span = $("<span />");//create span
     span.html(that.html().substring(0, [some value]));//set html of span
     span.attr("title", that.html());//add title
     that.empty();//empty cell
     that.append(span);//add span to cell
  }
});

Upvotes: 1

scrappedcola
scrappedcola

Reputation: 10572

$("TH").width(); Is meant to grab the actual width dimension of the element not the length of the text. For that just use the traditional js "length" attribute: $("TH").text().length; Overall what you are tring to do is good and not all that hard to do on your own. I usually have the server side set up the links and the text I need to truncate as it already knows about the length and everything but if you are rendering on client side its fine to do it there. Wrap what you want to hide in a "span" element with a css class like "none" .none{display:none;} on it that way all you need to have the handler do is add or remove class as appropriate.

Upvotes: 1

Henrik P. Hessel
Henrik P. Hessel

Reputation: 36627

There's a jQuery Plugin to accomplish your task.

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Upvotes: 0

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385204

The problem is that the th's width will be expanded until you do the truncation, and you can't do the truncation until you know the width that you want the th to be.

I suggest giving the th the style overflow: hidden so that it doesn't expand. Then put the text inside a <span> (or possibly a div).

You may then be able to use $('th').width() and compare with the width of your text div. How you go about determining an appropriate place to truncate the string:

  • (if you use a monospaced font) is now really easy
  • (if you use a variable-width font) may require iteratively chopping off characters until the div fits in the th. Yeugh!

Upvotes: 0

Related Questions