DataTables for VLAN inventory report

Netdisco/lib/App/Netdisco/Web/Plugin/Report/VlanInventory.pm

@@ -15,7 +15,7 @@ register_report(
 );
 
 get '/ajax/content/report/vlaninventory' => require_login sub {
-    my $set = schema('netdisco')->resultset('DeviceVlan')->search(
+    my @results = schema('netdisco')->resultset('DeviceVlan')->search(
         { 'me.description' => { '!=', 'NULL' } },
         {   join   => { 'ports' => 'vlan' },
             select => [
@@ -27,16 +27,18 @@ get '/ajax/content/report/vlaninventory' => require_login sub {
             as       => [qw/ vlan description dcount pcount /],
             group_by => [qw/ me.vlan me.description /],
         }
-    );
+    )->hri->all;
-    return unless $set->has_rows;
+
+    return unless scalar @results;
 
     if ( request->is_ajax ) {
-        template 'ajax/report/vlaninventory.tt', { results => $set, },
+        my $json = to_json (\@results);
+        template 'ajax/report/vlaninventory.tt', { results => $json },
             { layout => undef };
     }
     else {
         header( 'Content-Type' => 'text/comma-separated-values' );
-        template 'ajax/report/vlaninventory_csv.tt', { results => $set, },
+        template 'ajax/report/vlaninventory_csv.tt', { results => \@results },
             { layout => undef };
     }
 };

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

@@ -1,24 +1,44 @@
-[% USE Number.Format %]
+<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
-<table class="table table-bordered table-condensed table-striped nd_floatinghead">
   <thead>
     <tr>
-      <th class="nd_center-cell">VLAN ID</th>
+      <th>VLAN ID</th>
-      <th class="nd_center-cell">VLAN Name</th>
+      <th>VLAN Name</th>
-      <th class="nd_center-cell">Device Count</th>
+      <th>Device Count</th>
-      <th class="nd_center-cell">Port Count</th>
+      <th>Port Count</th>
     </tr>
   </thead>
-  </tbody>
-    [% WHILE (row = results.next) %]
-    <tr>
-      <td><a class="nd_linkcell"
-          href="[% uri_for('/search') %]?tab=vlan&q=[% row.vlan | uri %]">
-            [% row.vlan | html_entity %]</a></td>
-      <td class="nd_center-cell">[% row.description %]</td>
-      <td class="nd_center-cell">[% row.get_column('dcount') | format_number %]</td>
-      <td class="nd_center-cell">[% row.get_column('pcount') | format_number %]</td>
-    </tr>
-    [% END %]
-  </tbody>
 </table>
 
+<script type="text/javascript">
+$(document).ready(function() {
+  var table = $('#data-table').dataTable({
+    "deferRender": true,
+    "data": [% results %],
+    "columns": [
+      {
+        "data": 'vlan',
+        "render": function(data, type, row, meta) {
+          return '<a href="[% uri_for('/search') %]?tab=vlan&q=' + encodeURIComponent(data) + '">' + data + '</a>';
+        }
+      }, {
+        "data": 'description',
+        "render": function(data, type, row, meta) {
+          return he.encode(data || '');
+        }
+      }, {
+        "data": 'dcount',
+        "searchable": false,
+        "render": function(data, type, full, meta) {
+          return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+      }, {
+        "data": 'pcount',
+        "searchable": false,
+        "render": function(data, type, full, meta) {
+          return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+      }
+    ]
+  });
+});
+</script>

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

@@ -1,12 +1,12 @@
 [% USE CSV -%]
 [% CSV.dump([ 'VLAN ID' 'VLAN Name' 'Device Count' 'Port Count' ]) %]
 
-[% WHILE (row = results.next) %]
+[% FOREACH row IN results %]
   [% mylist = [] %]
   [% mylist.push(row.vlan) %]
   [% mylist.push(row.description) %]
-  [% mylist.push(row.get_column('dcount')) %]
+  [% mylist.push(row.dcount) %]
-  [% mylist.push(row.get_column('pcount')) %]
+  [% mylist.push(row.pcount) %]
   [% CSV.dump(mylist) %]
 
 [% END %]