<table id="ps-data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Status</th>
      <th>Name</th>
      <th>Port</th>
      <th>Vlan</th>
      <th>Speed</th>
      <th>Last Change</th>
    </tr>
  </thead>
</table>

<script type="text/javascript">
$(document).ready(function() {
  var table = $('#ps-data-table').dataTable({
    "deferRender": true,
    "data": [% results %],
    "columnDefs": [
        { "sortable": false, "targets": 0 },
        { "searchable": false, "targets": 0 },
        { "type": 'portsort', "targets": [ 'portsort' ] }
    ],
    "order": [[ 1, 'asc' ]],
    "columns": [{
        "data": 'up',
        "className": "nd_center-cell nd_devport-icon",
        "render": function(data, type, row, meta) {
          if (row.up_admin != "up") {
            return'<i class="icon-remove"></i>';
          }
          else if (row.up_admin == "up" && (row.up != "up" && row.up != "dormant")) {
            return '<i class="icon-arrow-down text-error"></i>';
          }
          else {
            return '<i class="icon-angle-up text-success"></i>';
          }
        }
      }, {
        "data": 'name',
        "render": function(data, type, row, meta) {
          return he.encode(data || '');
        }
      }, {
        "data": 'ip',
        "className": "nd_nowrap nd_center-cell",
        "render": function(data, type, row, meta) {
          var ddns = '';
          if (row.device.dns || row.device.name) {
            ddns = '<br>(' + he.encode(row.device.dns || row.device.name)  + ')';
          }
          return '<a href="[% device_ports %]&q=' + encodeURIComponent(data)
            + '&f=' + encodeURIComponent(row.port) + '">' + he.encode(data)
            + ' [' + he.encode(row.port) + ']</a>' + ddns;
        }
      }, {
        "data": 'port_vlans.vlan',
        "render": function(data, type, row, meta) {
          return data || '';
        }
      }, {
        "data": 'speed',
        "render": function(data, type, row, meta) {
          return data || '';
        }
      }, {
        "data": 'lastchange_stamp',
        "render": function(data, type, row, meta) {
          return data || '';
        }
      }
    ],
[% INCLUDE 'ajax/datatabledefaults.tt' -%]
  });
});</script>