<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>VLAN ID</th>
      <th>VLAN Names</th>
      <th>Device Count</th>
      <th>Port Count</th>
    </tr>
  </thead>
</table>

<script type="text/javascript">
$(document).ready(function() {
  var table = $('#data-table').dataTable({
    "deferRender": true,
    "data": [% results | none %],
    "columns": [
      {
        "data": 'vlan',
        "render": function(data, type, row, meta) {
          return '<a href="[% uri_for('/search') | none %]?tab=vlan&q=' + encodeURIComponent(data) + '">' + data + '</a>';
        }
      }, {
        "data": 'description',
        "render": function(data, type, row, meta) {
          let resp = '';
          for (let i = 0; i < data.length; i++) {
            resp += '<a href="[% uri_for('/search') | none %]?tab=vlan&q=' + encodeURIComponent(data[i]) + '">' + he.encode(data[i] || '') + '</a>';
            if (i < (data.length - 1)) {
              resp += ', ';
            }
          }
          return resp;
        }
      }, {
        "data": 'dcount',
        "searchable": false,
        "render": function(data, type, row, meta) {
          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
      }, {
        "data": 'pcount',
        "searchable": false,
        "render": function(data, type, row, meta) {
          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
      }
    ],
[% INCLUDE 'ajax/datatabledefaults.tt' -%]
  });
});
</script>