1<table id="data-table" class="table table-bordered table-hover" width="100%" cellspacing="0">
2  <thead>
3    <tr>
4      <th>IP</th>
5      <th>DNS</th>
6      <th>Device</th>
7      <th>Port</th>
8      <th>Name</th>
9      <th>Description</th>
10      <th class="nd_center-cell">Channel</th>
11      <th class="nd_center-cell">Tx Power (mW/dBm)</th>
12    </tr>
13  </thead>
14</table>
15
16<style>
17tr.group,
18tr.group:hover {
19    background-color: #ddd !important;
20}
21</style>
22
23<script>
24function groupString(d) {
25    "use strict";
26    var s = '';
27    s = s + 'Device: ';
28    s = s + '<a href="[% uri_for('/device') | none %]?tab=details&q=' + encodeURIComponent(d.ip) + '">';
29    s = s + he.encode(d.dns || d.device_name || d.ip);
30    if (d.dns || d.device_name) {
31        s = s + ' (' +  he.encode(d.ip) + ') ';
32    }
33    s = s + '</a> Model: ' + he.encode(d.model || '');
34    s = s + he.encode(d.location ? ' Location: ' + d.location : '');
35
36    return s;
37}
38
39$(document).ready(function() {
40  var table = $('#data-table').DataTable({
41    "serverSide": true,
42    "ajax": "[% uri_for('/ajax/content/report/apradiochannelpower/data') | none %]",
43    "order": [[ 0, 'asc' ]],
44    "columns": [
45      {
46        // Grouping column
47        "data": 'ip',
48        "visible": false
49      }, {
50        // Included for filtering
51        "data": 'dns',
52        "visible": false
53      }, {
54        // Included for filtering
55        "data": 'device_name',
56        "visible": false
57      }, {
58        "data": 'port',
59        "type": 'portsort',
60        "render": function(data, type, row, meta) {
61          return type === 'display' ?
62            '<a href="[% device_ports | none %]&q=' + encodeURIComponent(row.ip) + '&f=' + encodeURIComponent(data) + '">' + he.encode(data || '') + '</a>' :
63            he.encode(data || '');
64        }
65      }, {
66        "data": 'port_name',
67        "render": function(data, type, row, meta) {
68          return he.encode(data || '');
69        }
70      }, {
71        "data": 'descr',
72        "render": function(data, type, row, meta) {
73          return he.encode(data || '');
74        }
75      }, {
76        "data": 'channel',
77        "className": "nd_center-cell"
78      }, {
79        "data": 'power',
80        "className": "nd_center-cell",
81        "render": function(data, type, row, meta) {
82          return (row.power2 ? data + ' / ' + row.power2 : '');
83        }
84      }
85    ],
86    "drawCallback": function ( settings ) {
87      var api = this.api();
88      var rows = api.rows( {page:'current'} ).nodes();
89      var last=null;
90
91      api.column(0, {page:'current'} ).data().each( function ( group, i ) {
92        if ( last !== group ) {
93          var row_data = api.row( i ).data();
94          $(rows).eq( i ).before(
95            '<tr class="group"><td colspan="5">' + groupString(row_data) + '</td></tr>'
96            );
97          last = group;
98        }
99      } );
100    },
101[% INCLUDE 'ajax/datatabledefaults.tt' -%]
102  } );
103
104  // Order by the grouping
105  $('#data-table tbody').on( 'click', 'tr.group', function () {
106    var currentOrder = table.order()[0];
107    if ( currentOrder[0] === 0 && currentOrder[1] === 'asc' ) {
108      table.order( [ 0, 'desc' ] ).draw();
109    }
110    else {
111      table.order( [ 0, 'asc' ] ).draw();
112    }
113  } );
114} );
115</script>
116