Added hysteresis to length, clickable "…more"

dataRender/ellipsis.js

@@ -68,7 +68,7 @@ jQuery.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml )
  
         d = d.toString(); // cast numbers
  
-		if ( d.length <= cutoff ) {
+        if ( d.length <= cutoff * 1.5) {
             return d;
         }
  
@@ -83,7 +83,21 @@ jQuery.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml )
         if ( escapeHtml ) {
             shortened = esc( shortened );
         }
-
-		return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
+        var myID = row[0];
+        return '<span class="ellipsis" title="'+esc(d)+'">'+ shortened + '</span><a id="ellipsis_' + myID + '" onclick=toggleVisibility(' + myID + ') class="ellipsis" style="font-style: italic"> &#8230more</a><span id="truncatedItem_' + myID + '" style="display:none">' +d.substr(shortened.length, d.length)+'<span>';
     };
 };
+
+
+function toggleVisibility(myId){
+	var truncatedText = document.getElementById("truncatedItem_"+myId);
+	var ellipsis = document.getElementById("ellipsis_" + myId);
+	if(ellipsis.innerText === truncatedText.innerText) {
+        ellipsis.innerText = " …more";
+        ellipsis.style = "font-style: italic";
+  	}
+	else {
+		ellipsis.innerText = truncatedText.innerText;
+        ellipsis.style  = "";
+	}
+}