DataTables for ports with multiple nodes attached report

Netdisco/share/views/ajax/report/portmultinodes.tt

@@ -1,23 +1,44 @@
-[% USE Number.Format %]
-<table class="table table-bordered table-condensed table-striped nd_floatinghead">
+<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
   <thead>
     <tr>
       <th>Device</th>
-      <th class="nd_center-cell">Port</th>
-      <th class="nd_center-cell">Port Description</th>      
-      <th class="nd_center-cell">Node Count</th>
+      <th>Port</th>
+      <th>Port Description</th>      
+      <th>Node Count</th>
     </tr>
   </thead>
-  </tbody>
-    [% FOREACH row IN results %]
-    <tr>
-      <td>[% row.dns || row.name || row.ip | html_entity %]</td>
-      <td class="nd_center-cell"><a href="[% device_ports %]&q=[% row.ip | uri %]&f=[% row.port | uri %]&c_nodes=on">
-               [% row.port | html_entity %]</a></td>
-      <td class="nd_center-cell">[% row.description | html_entity %]</td>
-      <td class="nd_center-cell">[% row.mac_count | format_number %]</td>
-    </tr>
-    [% END %]
-  </tbody>
 </table>
 
+<script type="text/javascript">
+$(document).ready(function() {
+  var table = $('#data-table').dataTable({
+    "deferRender": true,
+    "order": [[ 3, "desc" ]],
+    "data": [% results %],
+    "columns": [
+      {
+        "data": 'ip',
+        "render": function(data, type, row, meta) {
+          return he.encode(row.dns || row.name || row.ip);
+        }
+      }, {
+        "data": 'port',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% device_ports %]&q=' + encodeURIComponent(row.ip) + '&f=' + encodeURIComponent(data) + '&c_nodes=on">' + he.encode(data) + '</a>';
+        }
+      }, {
+        "data": 'description',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'mac_count',
+        "searchable": false,
+        "render": function(data, type, full, meta) {
+          return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+      }
+    ]
+  });
+});
+</script>