DataTables for device port tab

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

@@ -1,5 +1,5 @@
 [% SET user_can_port_control = user_has_role('port_control') %]
-<table class="table table-bordered table-striped nd_floatinghead">
+<table id="dp-data-table" class="table table-bordered table-striped" width="100%" cellspacing="0">
   <thead>
     <tr>
       <th></th>
@@ -7,8 +7,13 @@
       [% NEXT IF item.name == 'c_admin' %]
       [% NEXT IF item.name == 'c_nodes' AND params.c_nodes AND params.c_neighbors %]
         [% NEXT UNLESS params.${item.name} %]
-        <th[% ' class="nd_nudge-for-icon"' IF
+        [% SET th_class = '' %]
-          (user_can_port_control AND params.c_admin AND (item.name == 'c_port' OR item.name == 'c_name')) %]>
+        [% IF (user_can_port_control AND params.c_admin AND (item.name == 'c_port' OR item.name == 'c_name')) %]
+          [% th_class = ' class="nd_nudge-for-icon natural"' %]
+        [% ELSIF (item.name == 'c_port' OR item.name == 'c_descr' OR item.name == 'c_name') %]
+          [% th_class = ' class="natural"' %]
+        [% END %]
+        <th[% th_class %]>
           [% item.label | html_entity %]
         </th>
       [% END %]
@@ -368,3 +373,17 @@
   </div>
 </div>
 [% END %]
+
+<script>
+$(document).ready(function() {
+    $('#dp-data-table').dataTable({
+        "columnDefs": [
+            { "sortable": false, "targets": 0 },
+            { "searchable": false, "targets": 0 },
+            { "type": 'natural', "targets": [ 'natural' ] }
+        ],
+        "order": [[ 1, 'asc' ]],
+        "pageLength": 25,
+    } );
+} );
+</script>