DataTables for IP subnet utilization report

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

@@ -1,4 +1,5 @@
-<table class="table table-bordered table-condensed table-striped nd_floatinghead">
+[% USE Number.Format %]
+<table id="data-table" class="table table-bordered table-condensed table-hover" width="100%" cellspacing="0">
   <thead>
     <tr>
       <th class="nd_center-cell">Subnet</th>
@@ -12,10 +13,25 @@
     <tr>
       <td class="nd_center-cell"><a href="[% uri_for('/report/ipinventory') %]?subnet=[% row.subnet | uri %]&daterange=[% daterange | uri %]&limit=[% row.subnet_size | uri %]">
                [% row.subnet | html_entity %]</a></td>
-      <td class="nd_center-cell">[% row.subnet_size | html_entity %]</td>
+      <td class="nd_center-cell">[% row.subnet_size | format_number %]</td>
-      <td class="nd_center-cell">[% row.active | html_entity %]</td>
+      <td class="nd_center-cell">[% row.active | format_number %]</td>
       <td class="nd_center-cell">[% row.percent | html_entity %]</td>
     </tr>
     [% END %]
   </tbody>
 </table>
+
+<script>
+$(document).ready(function() {
+  $('#data-table').dataTable({
+    "processing": true,
+    "stateSave": true,
+    "pageLength": 25,
+    "language": {
+      "search": 'Filter records: '
+    },
+    "order": [[ 3, 'desc' ]],
+  } );
+} );
+</script>
+