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>Name</th>
7      <th>Model</th>
8      <th>Location</th>
9      <th>PoE<br>Module</th>
10      <th class="nd_center-cell">Supply</th>
11      <th class="nd_center-cell">Power<br>(W)</th>
12      <th class="nd_center-cell">Capable<br>Ports</th>
13      <th class="nd_center-cell">Powered<br>Ports</th>
14      <th class="nd_center-cell">Disabled<br>Ports</th>
15      <th class="nd_center-cell">Errored<br>Ports</th>
16      <th class="nd_center-cell">Committed<br>(W)</th>
17      <th class="nd_center-cell">Delivering<br>(W)</th>
18    </tr>
19  </thead>
20  <tbody>
21    [% FOREACH row IN results %]
22    <tr>
23      <td>[% row.ip | html_entity %]</td>
24      <td>[% row.dns | html_entity %]</td>
25      <td>[% row.name | html_entity %]</td>
26      <td>[% row.model | html_entity %]</td>
27      <td>[% row.location | html_entity %]</td>
28      <td>[% row.module | html_entity %]</td>
29      <td class="nd_center-cell">[% row.power | html_entity %]</td>
30      <td class="nd_center-cell">[% row.status | html_entity %]</td>
31      <td class="nd_center-cell">[% row.poe_capable_ports | html_entity %]</td>
32      <td class="nd_center-cell">[% row.poe_powered_ports | html_entity %]</td>
33      <td class="nd_center-cell">[% row.poe_disabled_ports | html_entity %]</td>
34      <td class="nd_center-cell">[% row.poe_errored_ports | html_entity %]</td>
35      <td class="nd_center-cell">[% row.poe_power_committed | html_entity %]</td>
36      <td class="nd_center-cell">[% row.poe_power_delivering | html_entity %]</td>
37    </tr>
38    [% END %]
39  </tbody>
40</table>
41
42<style>
43tr.group,
44tr.group:hover {
45    background-color: #ddd !important;
46}
47</style>
48
49<script>
50function groupString(d) {
51    "use strict";
52    var s = '';
53    s = s + 'Device: ';
54    s = s + '<a href="[% uri_for('/device') | none %]?tab=details&q=' + encodeURIComponent(d.ip) + '">';
55    s = s + he.encode(d.dns || d.name || d.ip);
56    if (d.dns || d.name) {
57        s = s + ' (' +  he.encode(d.ip) + ') ';
58    }
59    s = s + '</a> Model: ' + he.encode(d.model || '');
60    s = s + he.encode(d.location ? ' Location: ' + d.location : '');
61
62    return s;
63}
64
65$(document).ready(function() {
66    var table = $('#data-table').DataTable({
67    "serverSide": true,
68    "ajax": "[% uri_for('/ajax/content/report/devicepoestatus/data') | none %]",
69    "order": [[ 0, 'asc' ]],
70    "columns": [
71      {
72        // Grouping column
73        "data": 'ip',
74        "visible": false
75      }, {
76        // Included for filtering
77        "data": 'dns',
78        "visible": false
79      }, {
80        // Included for filtering
81        "data": 'name',
82        "visible": false
83      }, {
84        // Included for filtering
85        "data": 'model',
86        "visible": false
87      }, {
88        // Included for filtering
89        "data": 'location',
90        "visible": false
91      }, {
92        "data": 'module',
93        "searchable": false
94      }, {
95        "data": 'status',
96        "className": "nd_center-cell",
97        "render": function(data, type, row, meta) {
98          return he.encode(data || '');
99        }
100      }, {
101        "data": 'power',
102        "className": "nd_center-cell",
103        "searchable": false,
104        "render": function(data, type, row, meta) {
105          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
106        }
107      }, {
108        "data": 'poe_capable_ports',
109        "className": "nd_center-cell",
110        "searchable": false,
111        "render": function(data, type, row, meta) {
112          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
113        }
114      }, {
115        "data": 'poe_powered_ports',
116        "className": "nd_center-cell",
117        "searchable": false,
118        "render": function(data, type, row, meta) {
119          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
120        }
121      }, {
122        "data": 'poe_disabled_ports',
123        "className": "nd_center-cell",
124        "searchable": false,
125        "render": function(data, type, row, meta) {
126          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
127        }
128      }, {
129        "data": 'poe_errored_ports',
130        "className": "nd_center-cell",
131        "searchable": false,
132        "render": function(data, type, row, meta) {
133          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
134        }
135      }, {
136        "data": 'poe_power_committed',
137        "className": "nd_center-cell",
138        "searchable": false,
139        "render": function(data, type, row, meta) {
140          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
141        }
142      }, {
143        "data": 'poe_power_delivering',
144        "className": "nd_center-cell",
145        "searchable": false,
146        "render": function(data, type, row, meta) {
147          return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
148        }
149      }
150    ],
151    "drawCallback": function ( settings ) {
152      var api = this.api();
153      var rows = api.rows( {page:'current'} ).nodes();
154      var last=null;
155
156      api.column(0, {page:'current'} ).data().each( function ( group, i ) {
157        if ( last !== group ) {
158          var row_data = api.row( i ).data();
159          $(rows).eq( i ).before(
160            '<tr class="group"><td colspan="9">' + groupString(row_data) + '</td></tr>'
161            );
162          last = group;
163        }
164      } );
165    },
166[% INCLUDE 'ajax/datatabledefaults.tt' -%]
167  } );
168
169    // Order by the grouping
170    $('#data-table tbody').on( 'click', 'tr.group', function () {
171        var currentOrder = table.order()[0];
172        if ( currentOrder[0] === 0 && currentOrder[1] === 'asc' ) {
173            table.order( [ 0, 'desc' ] ).draw();
174        }
175        else {
176            table.order( [ 0, 'asc' ] ).draw();
177        }
178    } );
179} );
180</script>
181