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