DataTables for device search results tab

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

@@ -8,40 +8,46 @@ use List::MoreUtils ();
 
 use App::Netdisco::Web::Plugin;
 
-register_search_tab({ tag => 'device', label => 'Device', provides_csv => 1 });
+register_search_tab(
-
+    { tag => 'device', label => 'Device', provides_csv => 1 } );
-my $headers = ['Device','Contact','Location','System Name','Model','OS Version','Management IP','Serial'];
 
 # device with various properties or a default match-all
 get '/ajax/content/search/device' => require_login sub {
-    my $has_opt = List::MoreUtils::any {param($_)}
+    my $has_opt = List::MoreUtils::any { param($_) }
-      qw/name location dns ip description model os_ver vendor layers/;
+    qw/name location dns ip description model os_ver vendor layers/;
-    my $set;
+    my $rs;
 
     if ($has_opt) {
-        $set = schema('netdisco')->resultset('Device')
+        $rs = schema('netdisco')->resultset('Device')->columns(
-          ->with_times->search_by_field(scalar params);
+            [   "ip",       "dns",   "name",   "contact",
+                "location", "model", "os_ver", "serial"
+            ]
+        )->with_times->search_by_field( scalar params );
     }
     else {
         my $q = param('q');
-        send_error('Missing query', 400) unless $q;
+        send_error( 'Missing query', 400 ) unless $q;
 
-        $set = schema('netdisco')->resultset('Device')
+        $rs = schema('netdisco')->resultset('Device')->columns(
-          ->with_times->search_fuzzy($q);
+            [   "ip",       "dns",   "name",   "contact",
+                "location", "model", "os_ver", "serial"
+            ]
+        )->with_times->search_fuzzy($q);
     }
-    return unless $set->count;
 
-    if (request->is_ajax) {
+    my @results = $rs->hri->all;
-        template 'ajax/search/device.tt', {results => $set},
+    return unless scalar @results;
-          { layout => undef };
+
+    if ( request->is_ajax ) {
+        my $json = to_json( \@results );
+        template 'ajax/search/device.tt', { results => $json },
+            { layout => undef };
     }
     else {
         header( 'Content-Type' => 'text/comma-separated-values' );
-        template 'ajax/search/device_csv.tt', {
+        template 'ajax/search/device_csv.tt', { results => \@results, },
-          results => $set,
+            { layout => undef };
-          headers => $headers,
-        }, { layout => undef };
     }
 };
 
-true;
+1;

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

@@ -1,4 +1,4 @@
-<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>
@@ -12,19 +12,59 @@
       <th>Last Discovered</th>
     </tr>
   </thead>
-  </tbody>
-    [% WHILE (row = results.next) %]
-    <tr>
-      <td><a href="[% uri_for('/device') %]?q=[% row.ip | uri %]">[% row.dns || row.ip | html_entity %]</a></td>
-      <td>[% row.contact | html_entity %]</td>
-      <td>[% row.location | html_entity %]</td>
-      <td>[% row.name | html_entity %]</td>
-      <td>[% row.model | html_entity %]</td>
-      <td>[% row.os_ver | html_entity %]</td>
-      <td>[% row.ip | html_entity %]</td>
-      <td>[% row.serial | html_entity %]</td>
-      <td>[% row.last_discover_stamp | html_entity %]</td>
-    </tr>
-    [% END %]
-  </tbody>
 </table>
+
+<script type="text/javascript">
+$(document).ready(function() {
+  var table = $('#data-table').dataTable({
+    "deferRender": true,
+    "data": [% results %],
+    "columns": [{
+        "data": 'ip',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% uri_for('/device') %]?q=' + encodeURIComponent(data) + '">' + he.encode(row.dns || row.name || row.ip) + '</a>';
+        }
+      }, {
+        "data": 'contact',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'location',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'name',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'model',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'os_ver',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'ip',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'serial',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'last_discover_stamp',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }
+    ]
+  });
+});</script>

Netdisco/share/views/ajax/search/device_csv.tt

@@ -1,7 +1,7 @@
 [% USE CSV -%]
-[% CSV.dump(headers) %]
+[% CSV.dump(['Device','Contact','Location','System Name','Model','OS Version','Management IP','Serial']) %]
 
-[% WHILE (row = results.next) %]
+[% FOREACH row IN results %]
   [% mylist = [] %]
   [% device = row.dns || row.ip %]
   [% FOREACH col IN [ device row.contact row.location row.name row.model row.os_ver row.ip row.serial] %]