View Single Post
  #1  
Old 12-19-2013, 08:56 PM
  Mish's Avatar 
Mish Mish is offline
 

Advanced Member
  
Join Date: Feb 2008
Posts: 92
 

Thumbs up 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
__________________
X-Cart Gold 4.6.1
Reply With Quote