<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Device</th>
      <th>Model</th>
      <th>Location</th>
      <th>Port</th>
      <th>SSID</th>
      <th>Node Count</th>
    </tr>
  </thead>
</table>

<script type="text/javascript">
$(document).ready(function() {
  var table = $('#data-table').dataTable({
    "deferRender": true,
    "order": [[ 5, "desc" ]],
    "data": [% results %],
    "columns": [
      {
        "data": 'ip',
        "render": function(data, type, row, meta) {
          return type === 'display' ?
            '<a href="[% uri_for('/device') %]?tab=details&q=' + encodeURIComponent(row.ip) + '">'
            + he.encode(row.dns || row.name || row.ip) + '</a>' :
          data;
        }
      }, {
        "data": 'model',
        "render": function(data, type, row, meta) {
          return he.encode(data || '');
        }
      }, {
        "data": 'location',
        "render": function(data, type, row, meta) {
          return he.encode(data || '');
        }
      }, {
        "data": 'port',
        "type": 'portsort',
        "render": function(data, type, row, meta) {
          return type === 'display' ?
            '<a href="[% device_ports %]&q=' + encodeURIComponent(row.ip) + '&f=' + encodeURIComponent(data) + '&c_nodes=on">' + he.encode(data) + '</a>' :
            data;
        }
      }, {
        "data": 'ssid',
        "render": function(data, type, row, meta) {
          return he.encode(data || '');
        }
      }, {
        "data": 'mac_count',
        "searchable": false,
        "render": function(data, type, row, meta) {
          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
      }
    ],
[% INCLUDE 'ajax/datatabledefaults.tt' -%]
  });
});
</script>