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 %]&nbsp;[% row.model | html_entity %]</a>
15            [% IF row.os %] running &quot;[% row.os | html_entity %]&quot;[% 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