<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Left Device</th>
      <th>Left Port</th>
      <th>Left VLANs</th>
      <th>Right Device</th>
      <th>Right Port</th>
      <th>Right VLANs</th>
    </tr>
  </thead>
</table>
<script type="text/javascript">
$(document).ready(function() {
    var table = $('#data-table').dataTable({
        "deferRender": true,
        "data": [% results %],
        "columns": [
               {
                "data": 'left_device',
                "render": function(data, type, row, meta) {
                    return '<a href="[% device_ports %]&q=' + encodeURIComponent(data) + '">' + he.encode(data) + '</a>'; }
            }, {
              "data": 'left_port',
              "type": 'portsort',
              "render": function(data, type, row, meta) {
                return type === 'display' ?
                  '<a href="[% device_ports %]&q=' + encodeURIComponent(row.left_device) + '&f=' + encodeURIComponent(data) + '">' + he.encode(data) + '</a>' :
                  data; }
            }, {
                "data": 'left_vlans'
            }, {
                "data": 'right_device',
                "render": function(data, type, row, meta) {
                    return '<a href="[% device_ports %]&q=' + encodeURIComponent(data) + '">' + he.encode(data) + '</a>'; }
            }, {
              "data": 'right_port',
              "type": 'portsort',
              "render": function(data, type, row, meta) {
                return type === 'display' ?
                  '<a href="[% device_ports %]&q=' + encodeURIComponent(row.right_device) + '&f=' + encodeURIComponent(data) + '">' + he.encode(data) + '</a>' :
                  data; }
            }, {
                "data": 'right_vlans'
            }
        ],
[% INCLUDE 'ajax/datatabledefaults.tt' -%]
    });
});
</script>