DataTables for device addresses tab

Netdisco/lib/App/Netdisco/Web/Plugin/Device/Addresses.pm

@@ -16,18 +16,20 @@ get '/ajax/content/device/addresses' => require_login sub {
         = schema('netdisco')->resultset('Device')->search_for_device($q)
         or send_error( 'Bad device', 400 );
 
-    my $set = $device->device_ips->search( {}, { order_by => 'alias' } );
+    my @results = $device->device_ips->search( {}, { order_by => 'alias' } )->hri->all;
-    return unless $set->count;
+
+    return unless scalar @results;
 
     if (request->is_ajax) {
-        template 'ajax/device/addresses.tt', { results => $set, },
+        my $json = to_json( \@results );
+        template 'ajax/device/addresses.tt', { results => $json },
             { layout => undef };
     }
     else {
         header( 'Content-Type' => 'text/comma-separated-values' );
-        template 'ajax/device/addresses_csv.tt', { results => $set, },
+        template 'ajax/device/addresses_csv.tt', { results => \@results },
             { layout => undef };
     }
 };
 
-true;
+1;

Netdisco/share/views/ajax/device/addresses.tt

@@ -1,4 +1,4 @@
-<table class="table table-bordered table-condensed table-striped nd_floatinghead">
+<table id="da-data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
   <thead>
     <tr>
       <th>Address</th>
@@ -8,18 +8,42 @@
       <th>Prefix</th>
     </tr>
   </thead>
-  </tbody>
-    [% WHILE (row = results.next) %]
-    <tr>
-      <td>[% row.alias | html_entity %]</a>
-      <td>[% row.dns | html_entity %]</a>
-      <td class="nd_center-cell"><a class="nd_linkcell"
-        href="[% device_ports %]&q=[% params.q | uri %]&f=[% row.port | uri %]">[% row.port | html_entity %]</a></td>
-      <td>[% row.device_port.name | html_entity %]</td>
-      <td><a class="nd_linkcell"
-        href="[% search_device %]&q=[% row.subnet | uri %]&ip=[% row.subnet | uri %]">[% row.subnet | html_entity %]</a></td>
-    </tr>
-    [% END %]
-  </tbody>
 </table>
 
+<script type="text/javascript">
+$(document).ready(function() {
+  var table = $('#da-data-table').dataTable({
+    "deferRender": true,
+    "pageLength": 25,
+    "data": [% results %],
+    "columns": [
+      {
+        "data": 'alias',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'dns',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'port',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% device_ports %]&q=' + encodeURIComponent(row.ip) + '&f=' + encodeURIComponent(data) + '">' + he.encode(data || '') + '</a>';
+        }
+      }, {
+        "data": 'name',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'subnet',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% search_device %]&q=' + encodeURIComponent(data) + '&ip=' + encodeURIComponent(data) + '">' + he.encode(data || '') + '</a>';
+        }
+      }
+    ]
+  });
+});
+</script>

Netdisco/share/views/ajax/device/addresses_csv.tt

@@ -1,7 +1,7 @@
 [% USE CSV -%]
 [% CSV.dump([ 'Address' 'DNS' 'Interface' 'Description' 'Prefix' ]) %]
 
-[% WHILE (row = results.next) %]
+[% FOREACH row IN results %]
   [% mylist = [] %]
   [% FOREACH col IN [ row.alias row.dns row.port row.device_port.name row.subnet ] %]
     [% mylist.push(col) %]