DataTables for access point channel distribution report

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

@@ -15,25 +15,27 @@ register_report(
 );
 
 get '/ajax/content/report/apchanneldist' => require_login sub {
-    my $set = schema('netdisco')->resultset('DevicePortWireless')->search(
+    my @results = schema('netdisco')->resultset('DevicePortWireless')->search(
         { channel => { '!=', '0' } },
         {   select   => [ 'channel', { count => 'channel' } ],
             as       => [qw/ channel ch_count /],
             group_by => [qw/channel/],
             order_by => { -desc => [qw/count/] },
         },
-    );
-    return unless $set->count;
+    )->hri->all;
 
-    if (request->is_ajax) {
-        template 'ajax/report/apchanneldist.tt', { results => $set, },
+    return unless scalar @results;
+
+    if ( request->is_ajax ) {
+        my $json = to_json( \@results );
+        template 'ajax/report/apchanneldist.tt', { results => $json },
             { layout => undef };
     }
     else {
         header( 'Content-Type' => 'text/comma-separated-values' );
-        template 'ajax/report/apchanneldist_csv.tt', { results => $set, },
+        template 'ajax/report/apchanneldist_csv.tt', { results => \@results },
             { layout => undef };
     }
 };
 
-true;
+1;

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

@@ -1,17 +1,29 @@
-<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 class="nd_center-cell">Channel</th>
-      <th class="nd_center-cell">Count</th>
+      <th>Channel</th>
+      <th>Count</th>
     </tr>
   </thead>
-  </tbody>
-    [% WHILE (row = results.next) %]
-    <tr>
-      <td class="nd_center-cell">[% row.channel %]</td>
-      <td class="nd_center-cell">[% row.get_column('ch_count') %]</td>
-    </tr>
-    [% END %]
-  </tbody>
 </table>
 
+<script type="text/javascript">
+$(document).ready(function() {
+  var table = $('#data-table').dataTable({
+    "deferRender": true,
+    "order": [[ 1, "desc" ]],
+    "data": [% results %],
+    "columns": [
+      {
+        "data": 'channel'
+      }, {
+        "data": 'ch_count',
+        "searchable": false,
+        "render": function(data, type, full, meta) {
+          return data.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+      }
+    ]
+  });
+});
+</script>

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

@@ -1,10 +1,10 @@
 [% USE CSV -%]
 [% CSV.dump([ 'Channel' 'Count' ]) %]
 
-[% WHILE (row = results.next) %]
+[% FOREACH row IN results %]
   [% mylist = [] %]
   [% mylist.push(row.channel) %]
-  [% mylist.push(row.get_column('ch_count')) %]
+  [% mylist.push(row.ch_count) %]
   [% CSV.dump(mylist) %]
 
 [% END %]