1<table id="nsbi-data-table" class="table table-bordered table-hover" width="100%" cellspacing="0"> 2 <thead> 3 <tr> 4 <th>Model</th> 5 <th>Operating System Version</th> 6 <th>Count</th> 7 </tr> 8 </thead> 9 <tbody> 10 [% FOREACH row IN results %] 11 <tr> 12 <td> 13 <a href="[% search_device | none %]&q=[% row.model | uri %]&vendor=[% row.vendor | uri %]&model=[% row.model | uri %]"> 14 [% row.vendor.ucfirst | html_entity %] [% row.model | html_entity %]</a> 15 [% IF row.os %] running "[% row.os | html_entity %]"[% END %] 16 </td> 17 <td> 18 <a class="nd_linkcell" 19 href="[% search_device | none %]&q=[% row.os_ver | uri %]&vendor=[% row.vendor | uri %]&model=[% row.model | uri %]&os=[% row.os | uri %]&os_ver=[% row.os_ver | uri %]&matchall=on"> 20 [% row.os_ver | html_entity %]</a> 21 </td> 22 <td>[% row.os_ver_count | html_entity %]</td> 23 </tr> 24 [% END %] 25 </tbody> 26</table> 27 28<style> 29tr.group, 30tr.group:hover { 31 background-color: #ddd !important; 32} 33</style> 34 35<script> 36$(document).ready(function() { 37 var table = $('#nsbi-data-table').DataTable({ 38 "columnDefs": [ 39 { "visible": false, "targets": 0 } 40 ], 41 sort: false, 42 "drawCallback": function ( settings ) { 43 var api = this.api(); 44 var rows = api.rows( {page:'current'} ).nodes(); 45 var last=null; 46 47 api.column(0, {page:'current'} ).data().each( function ( group, i ) { 48 if ( last !== group ) { 49 $(rows).eq( i ).before( 50 '<tr class="group"><td colspan="2">'+group+'</td></tr>' 51 ); 52 53 last = group; 54 } 55 } ); 56 }, 57[% INCLUDE 'ajax/datatabledefaults.tt' -%] 58 } ); 59 60 // Order by the grouping 61 $('#nsbi-data-table tbody').on( 'click', 'tr.group', function () { 62 var currentOrder = table.order()[0]; 63 if ( currentOrder[0] === 0 && currentOrder[1] === 'asc' ) { 64 table.order( [ 0, 'desc' ] ).draw(); 65 } 66 else { 67 table.order( [ 0, 'asc' ] ).draw(); 68 } 69 } ); 70} ); 71</script> 72