I Have a problem when I try to sort my table with tablesorter.js. It looks easy to use it, but in my case it doesn't work... First of all, I explain my application:
1.- I have a database with several data
2.- I developed a web interface to search that data (HTML)
3.- I wanted to make interactive communication with the database, so I used AJAX
4.- I build the querys and the table with the results in another php file
So, in my HTML file:
<div id = "DivResults"></div>
And in the header of this file I added the jquery and tablesorter.js references and to my CSS file the contento of the CSS from tablesorter
$(document).ready(function() { $("#myTable").tablesorter(); } );
Now, in the php file I have the following code:
<table id="myTable" class="tablesorter" style="font-size: 8pt; position:relative; top: -10px;" >
<thead>
<tr>
<th><b>Col1</b></th>
<th><b>Col2</b></th>
<th><b>Col3</b></th>
<th><b>Col4</b></th>
<th><b>Col5</b></th>
</tr>
</thead>
<tbody>
<?php
for ($i = 0; $i<$n;$i++)
{
$Result_array = ordenar_array($Result_array,2, SORT_ASC,3,SORT_ASC);
echo "<tr>";
for ($aux = 0; $aux<5;$aux++)
{
echo "<td> ".$Result_array [$i][$aux]."</td>";
}
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
The table it's ok, the data are also ok and I display it in the correct way, but can't sort it with this function. Could anyone help me?
EDIT: this is the code that I added to my CSS file:
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(../img/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(../img/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(../img/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}