Added hysteresis to length, clickable "…more"

dataRender/ellipsis.js

@@ -48,42 +48,56 @@
  */
 
 jQuery.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
-	var esc = function ( t ) {
-		return t
-			.replace( /&/g, '&' )
-			.replace( /</g, '&lt;' )
-			.replace( />/g, '&gt;' )
-			.replace( /"/g, '&quot;' );
-	};
+    var esc = function ( t ) {
+        return t
+            .replace( /&/g, '&amp;' )
+            .replace( /</g, '&lt;' )
+            .replace( />/g, '&gt;' )
+            .replace( /"/g, '&quot;' );
+    };
  
-	return function ( d, type, row ) {
-		// Order, search and type get the original data
-		if ( type !== 'display' ) {
-			return d;
-		}
+    return function ( d, type, row ) {
+        // Order, search and type get the original data
+        if ( type !== 'display' ) {
+            return d;
+        }
  
-		if ( typeof d !== 'number' && typeof d !== 'string' ) {
-			return d;
-		}
+        if ( typeof d !== 'number' && typeof d !== 'string' ) {
+            return d;
+        }
  
-		d = d.toString(); // cast numbers
+        d = d.toString(); // cast numbers
  
-		if ( d.length <= cutoff ) {
-			return d;
-		}
+        if ( d.length <= cutoff * 1.5) {
+            return d;
+        }
  
-		var shortened = d.substr(0, cutoff-1);
+        var shortened = d.substr(0, cutoff-1);
  
-		// Find the last white space character in the string
-		if ( wordbreak ) {
-			shortened = shortened.replace(/\s([^\s]*)$/, '');
-		}
+        // Find the last white space character in the string
+        if ( wordbreak ) {
+            shortened = shortened.replace(/\s([^\s]*)$/, '');
+        }
  
-		// Protect against uncontrolled HTML input
-		if ( escapeHtml ) {
-			shortened = esc( shortened );
-		}
-
-		return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
-	};
+        // Protect against uncontrolled HTML input
+        if ( escapeHtml ) {
+            shortened = esc( shortened );
+        }
+        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  = "";
+	}
+}