[% USE Number.Format %]
<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Device</th>
      <th>Port</th>
      <th>Port Description</th>      
      <th>Admin Status</th>
    </tr>
  </thead>
</table>

<script type="text/javascript">
$(document).ready(function() {
    var table = $('#data-table').dataTable({
        "deferRender": true,
        "order": [[ 0, "asc" ], [1, "asc"]],
        "data": [% results %],
        "columns": [
            {
                "data": 'ip',
                "render": function(data, type, row, meta) {
                    return (row.dns || row.name || row.ip);
                }
            }, {
                "data": 'port',
                "render": function(data, type, row, meta) {
                    return '<a href="[% device_ports %]&q=' + row.ip + '&f=' + data + '&c_nodes=on">' + data + '</a>';
                }
            }, {
                "data": 'description'
            }, {
                "data": 'up_admin',
                "orderable": false,
                "searchable": false,
            }
        ]
    });

});
</script>