Migrating to jQuery the sort table feature.

admin/admin.php

@@ -28,9 +28,15 @@ if ($user->isAdmin()) {
 		<link rel="shortcut icon" href="<?php echo $conf->urlGelato;?>/images/favicon.ico" />
 		<script language="javascript" type="text/javascript" src="<?php echo $conf->urlGelato;?>/admin/scripts/jquery.js"></script>
 		<script language="javascript" type="text/javascript" src="<?php echo $conf->urlGelato;?>/admin/scripts/tools.js"></script>
-		<script language="javascript" type="text/javascript" src="<?php echo $conf->urlGelato;?>/admin/scripts/sortable.js"></script>
+		<script language="javascript" type="text/javascript" src="<?php echo $conf->urlGelato;?>/admin/scripts/jquery.tablesorter.min.js"></script>
 		<script type="text/javascript">
 		$(document).ready(function(){
+			$("#admin-table").tablesorter({        
+				headers: {            
+					2: {sorter: false},            
+					3: {sorter: false} 
+				} 
+			}); 			
 			$("#divMessages").fadeOut(5000,function(){
 				$("#divMessages").css({display:"none"});
 			});
@@ -90,12 +96,13 @@ if ($user->isAdmin()) {
 						}
 ?>						
 						<div class="tabla">
-						<table class="sortable" id="admin-table">
+						<table border="0" cellpadding="0" cellspacing="0" id="admin-table">
 							<thead>
 								<tr>
 									<th scope="col"><?php echo __("Login")?></th>
 									<th scope="col"><?php echo __("Name")?></th>
-									<th colspan="2" scope="col" class="unsortable"><?php echo __("Actions")?></th>
+									<th scope="col"><?php echo __("Actions")?></th>
+									<th scope="col"></th>
 								</tr>
 							</thead>
 							<tbody>
@@ -106,20 +113,11 @@ if ($user->isAdmin()) {
 						while($register = mysql_fetch_array($rs)) {
 ?>
 							<tr <?php if ($odd) { echo 'class="odd"'; } $odd=!$odd; ?>>
-								<td>
-									<?php echo $register["login"]."\n"; ?>
-								</td>
-								<td>
-									<?php echo $register["name"]."\n"; ?>
-								</td>
-								<td>
-									<a href="user.php?edit=<?php echo $register["id_user"]; ?>"><?php echo __("Edit")?></a>
-								</td>
-								<?php if ($_SESSION["user_id"] != $register["id_user"]) { ?>
-								<td>
-									<a href="user.php?delete=<?php echo $register["id_user"]; ?>"><?php echo __("Delete")?></a>
-								</td>
-								<?php } ?>
+								<td><?php echo $register["login"]."\n"; ?></td>
+								<td><?php echo $register["name"]."\n"; ?></td>
+								<td><a href="user.php?edit=<?php echo $register["id_user"]; ?>"><?php echo __("Edit")?></a></td>								
+								<td><?php if ($_SESSION["user_id"] != $register["id_user"]) { ?><a href="user.php?delete=<?php echo $register["id_user"]; ?>"><?php echo __("Delete")?></a><?php } ?>&nbsp;</td>
+								
 							</tr>
 <?php
 						}

admin/css/style.css

@@ -148,19 +148,15 @@ div.conversation ul { list-style-type: none; margin: 0px; padding: 0px 0px 0px 1
 		div.conversation ul li.even { background-color: #e8e8e8; }
 
 /* Tables design */
-
-#admin-table { width:535px; margin:0 auto; padding:0;}
-table { padding: 0; width:70%; margin: 0 auto; border-collapse: collapse; color: #333; background: #F3F5F7; }
-table a {color: #3A4856; text-decoration: none; border-bottom: 1px solid #C6C8CB; }
-table img { border:0px; }
-table a:visited {color: #777; text-decoration: none; }
-table a:hover {color: #000; text-decoration: none; }
-table caption {text-align: left; text-transform: uppercase;  padding-bottom: 10px; }
-table thead th {background: #BDD3E7; padding: 15px 10px; color: #fff; text-align: left; font-weight: normal; }
-table tbody, table thead {border-left: 1px solid #EAECEE; border-right: 1px solid #EAECEE; }
-table tbody {border-bottom: 1px solid #EAECEE; }                      
-table tbody td, table tbody th {padding: 10px; background: url('images/td_back.gif') repeat-x; text-align: left; }
-table tbody tr {background: #F3F5F7; }
-table tbody tr.odd {background: #F0F2F4; }
-table tbody  tr:hover {background: #EAECEE; color: #111; }
-table tfoot td, table tfoot th, table tfoot tr {text-align: left; background: #fff; padding: 10px; }
+#admin-table {background-color:#F3F5F7; margin:0; width:100%; text-align:left; font-size:12px; border:1px solid #EAECEE;}
+	#admin-table thead tr th, #admin-table tfoot tr th {background-color:#BDD3E7; padding:6px;}
+	#admin-table thead tr .header {background-image: url(images/bg.gif); background-repeat: no-repeat;	background-position: center right;	cursor: pointer;}
+	#admin-table tbody td {color:#3D3D3D; padding:6px; background-color:#FFF; background: url(images/td_back.gif) repeat-x; vertical-align:top;}
+	#admin-table a {color: #3A4856; text-decoration: none; border-bottom: 1px solid #C6C8CB; }
+	#admin-table tbody a:visited {color: #777; text-decoration: none; }
+	#admin-table tbody a:hover {color: #000; text-decoration: none; }
+	/*#admin-table tbody tr.odd td {background-color:#F0F0F6;}*/
+	#admin-table tbody tr:hover {background: #EAECEE; color: #111; }
+	#admin-table thead tr .headerSortUp {background-image: url(images/asc.gif);}
+	#admin-table thead tr .headerSortDown {background-image: url(images/desc.gif);}
+	#admin-table thead tr .headerSortDown, #admin-table thead tr .headerSortUp {background-color:#8dbdd8;}