.

generic/templates/generic/cid_view.html

@@ -98,11 +98,53 @@
 {% endblock %}
 
 {% block js %}
+
+
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.11.3/r-2.2.9/datatables.min.css"/>
  
 <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.11.3/r-2.2.9/datatables.min.js"></script>
 
     <script>
+jQuery.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
+    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;
+        }
+ 
+        if ( typeof d !== 'number' && typeof d !== 'string' ) {
+            return d;
+        }
+ 
+        d = d.toString(); // cast numbers
+ 
+        if ( d.length <= cutoff ) {
+            return d;
+        }
+ 
+        var shortened = d.substr(0, cutoff-1);
+ 
+        // 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>';
+    };
+};
 
         function postAjax(data) {
 
@@ -156,7 +198,13 @@
 
         $(document).ready(function () {
 
-            $("table").DataTable();
+            $("table").DataTable({
+    columnDefs: [ {
+      targets: [7,8,9,10,11],
+      render: $.fn.dataTable.render.ellipsis( 17, true )
+    } ]
+  });
+
             $("#toggle-internal").click((evt) => {
                 data = getGenericData();
                 data["toggle_internal"] = true;
@@ -226,4 +274,5 @@
         }
     </style>
 
+
 {% endblock %}