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