Limit text length within cell

geekyasha

I'm setting up data tables with a very limited working area, so real estate is key. I've managed to get the column widths small enough for my needs but the text ends up going to a new line and making the cell larger, is there a way to set a limit on the length within the cell? I'm hoping for something like:

"The rain in spain" to become "The rain in..." etc.

Thanks for any help.

UPEngineer

Oh my, I have been searching for the exact same thing all day!!! I have found a couple of jquery plugins to do this but they do not seem to be working.

I think it might have something to do with the rendering of the table such as having to use the jquery live method for links and such.

I was actually looking at the fnCallback function to see if I could call an ellipsis function after the table is rendered.

I know enough about jquery and the DOM to get myself in trouble LOL

geekyasha

I'm working on the same dangerous level of knowledge myself ;) Oh boy.

Just for curiosity's sake, what were the plugins you found?

geekyasha

I found a solution. It isn't the most elegant way but it works for my needs at the moment. I wrapped the data within the in a div and set the following attributes:
[code]
.tdfield{
width: 160px;
height: 15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

Blah blah blah blah blah blah blah blah blah blah blah blah.

[/code]

UPEngineer

I actually did that as well. But what I did was used the sample table_jui.css file as my css file and I added the following to those css elements.

table.display I added table-layout: fixed; to it. I found that I had to do this for it to work properly.

Then I added this:

table.display td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

The -o-text-overflow: ellipsis is for Opera browsers. You will find Firefox will not adhere to the overflow-ellipsis property. All of the plugins supposedly works with Firefox though.

But I could never get the plugins to work with datatables because I am figuring that the table is rendered using the dom (I hope that's the right term.) For example, if you view the source page after table is rendered you won't see any of the data in the page source. I tried to use a jquery live function somehow but couldn't find one to work.

I tried using the fnGetNode function of datatables to get the TR node and then select the TD element I wanted and apply an ellipsis function to it. But never could get it work.

Again, I am way green when it comes to this stuff. I do it for fun and I am learning on the fly.

Anyways, hope it helps!



I actually found quite a few plugins on the net, but I couldn't figure out a way to get them to work nicely with