DataTables for device name / DNS mismatch report

Netdisco/share/views/ajax/report/devicednsmismatch.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>Name</th>
@@ -8,16 +8,31 @@
       <th>Location</th>
     </tr>
   </thead>
-  </tbody>
-    [% WHILE (row = results.next) %]
-    <tr>
-      <td><a href="[% search_device %]&q=[% row.ip | uri %]">
-            [% row.name | html_entity %]</a>
-      <td>[% row.dns | html_entity %]</td>
-      <td>[% row.ip | html_entity %]</td>
-      <td>[% row.contact | html_entity %]</td>
-      <td>[% row.location | 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 search_device %]&q=' + data + '">' + (row.ip || row.name) + '</a>';
+                }
+            }, {
+                data: 'dns'
+            }, {
+                data: 'ip'
+            }, {
+                data: 'contact'
+            }, {
+                data: 'location'
+            }
+        ]
+    });
+
+});
+
+</script>