HOW-TO: Do a multi-line text-trim on dataTables cell contents

chrisviccaro

Hi folks, I am a developer utilizing dataTables in one of my Adobe AIR applications, and thought this piece of code may be useful to this community.

Full tutorial @ http://www.chrisviccaro.com/lab/mltexttrim.html .. but I'll gear this post towards dataTables specifically.

A fairly common technique employed when display data in tables is to trim a cell's text content when it is over a certain amount of characters to keep your table rows & columns relatively the same size. CSS3 allows us to do this, but, due to the nature of the way the DOM is rendered, you can only trim a value to be in one-line.
Doing this just takes a few lines of css:

[code]
table.sl-text-trim td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[/code]

But what if you want control over where the trim occurs? This is key to doing a multi-line trim. It just takes a bit of javascript magic.

The code involves a few preparatory steps:

-Add the following attribute to your elements in the DOM like so: where 144 is the character-limit for that column's cells.

-Killing the text-trims:
- Anytime you want to kill the text-trim, add the attribute text-trim-override with javascript to the cell (so: )
-Anytime you want to re-apply the text-trim, remove the attribute text-trim-override with javascript from the cell completely.

-Define a defaultWindowSize object in JS that has 2 properties, width and height. This will vary per application and is only to set the "strength" of the text-trim. The value you enter in the TH will flex when the window grows or shrinks from the default size:
[code]var defaultWindowSize = { width: 1280, height: 800 };[/code]

-Utilize the fnRowCallback in dataTables to iterate through the rows.
[code]
/...your dataTables init call property map...,
fnRowCallback:function($tr,data,iDisplayIndex,idx) {

var trimRatio = (window.nativeWindow.width + window.nativeWindow.height) /
(defaultWindowSize.width + defaultWindowSize.height);
for (var i = 0, $tc; $tc = $tr.childNodes[i]; i++) {
var $th = $(tr).parents('table').find('th:eq("+i+")")[0];
var cssClass = $th.className.replace('sorting','');
if (cssClass.length) {
var words = cssClass.split(" ");
for (var n=0,word; word = words[i];i++) {
word = "."+word;
}
if (!$($tc).is(words.join(" "))) {
$($tc).addClass(cssClass);
}
}
var originalText = $tc.attributes["original-text"];
var text = originalText ? originalText.value : $tc.firstChild.textContent;
if (!originalText) { $tc.setAttribute("original-text",text); }
if ($th.attributes["text-trim-override"]) {
$tc.firstChild.replaceWholeText(text);
} else {
var charLimit = $th.attributes["text-trim"] ?
trimRatio * $th.attributes["text-trim"].value : false;
if ((charLimit) && (text.length > charLimit)) {
var truncated = text.substr(0,charLimit)+"…";
$tc.firstChild.replaceWholeText(truncated);
}
}
}
}
return $tr;
}
[/code]

-Lastly, redraw the table on a window resize.
[code]
$(window).resize(function() {
yourDataTablejQueryObject.fnDraw();
});
[/code]