X-Cart forums - Users Online: Sortable, good looking table

Hi all,
I found the Users Online table quite rudimentary so I've upgraded it to make it so that it paginates and can be sorted. By default it sorts by Last Entry time.
This should work on Version 4.4.3 through to and including the current version, 4.6.1

Here is a picture:

Here is how to implement it:

1> Open /skin/common_files/modules/Users_online/stats.tpl

Make the following changes. Insertions are highlighted red:
At the very top:

Code:

{if $statistics}

  <script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js'></script>

  <script src='https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js'></script>

  <script src='https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js'></script>

  <link rel='stylesheet' type='text/css' href='https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css'>

  <link rel='stylesheet' type='text/css' href='https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css'>



<table cellpadding="0" cellspacing="0" width="100%">

<tr>

  <td bgcolor="#000000">

<table cellpadding="2" cellspacing="1" width="100%" id="usersonlinetable" style="background-color:white;">

  <thead>

<tr style="height: 16px;">

  <th class="TableHead" align="left" nowrap="nowrap" rowspan="2" style="background-color:lightblue;">{$lng.lbl_customer}</th>

  <th class="TableHead" align="left" nowrap="nowrap" colspan="2" style="background-color:lightblue;"><center>{$lng.lbl_date}</center></th>

  <th class="TableHead" nowrap="nowrap" rowspan="2" style="background-color:lightblue;">{$lng.lbl_current_page}</th>

  <th class="TableHead" nowrap="nowrap" rowspan="2" style="background-color:lightblue;">{$lng.lbl_cart_content}</th>

</tr>

<tr style="height: 16px;">

  <th class="TableHead" align="left" nowrap="nowrap" style="background-color:lightblue;">{$lng.lbl_first_entry}</th>

  <th class="TableHead" align="left" nowrap="nowrap" style="background-color:lightblue;">{$lng.lbl_last_entry}</th>

</tr>

</thead>

and then at the very bottom:

Code:

<br />

<div align="center">{$lng.txt_no_statistics}</div>



{/if}

{literal}

<script>

$(document).ready(function() { $('#usersonlinetable').dataTable( { "aaSorting": [[ 2, "desc" ]], "bJQueryUI": true, "sPaginationType": "full_numbers" } );

} );

</script>

{/literal}

Hope you like it :)