I am using the jQuery Table Sorter located here and it is not sorting my table. I’ve used the exact same code for a simple test page and it works no problem. If anyone could point out what could possibly be causing my issue in my code that would be wonderful.
Here is the code calling the JS files, the paths are correct.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-latest.js"></script>
<script type="text/javascript" src="../js/jquery.tablesorter.js"></script>
</head>
Here is a snippet of my code that contains the table that requires sorting.
<div id="roster">
<?php
$guildRealm = "taken out";
$guildName = "taken out";
$json = file_get_contents("http://us.battle.net/api/wow/guild/".$guildRealm."/".$guildName."?fields=members");
$json= json_decode($json);
$name = $json->name;
$level = $json->level;
$achievementPoints = $json->achievementPoints;
?>
<span class="h2"><?php echo $name; ?></span><br />
<span class="h4">Level: <?php echo $level; ?></span><br />
<span class="h5"><img src="images/guild_achievement_icon.png" width="38" height="32"> </span><span class="AP"><?php echo $achievementPoints; ?></span><br />
<table id="gRoster" class="tablesorter" width="100%" cellspacing="0">
<thead>
<tr class="roster-header">
<th width="5%"></th>
<th align="left">Name</th>
<th align="center">Rank</th>
<th align="center">Level</th>
<th align="center">Class</th>
<th align="center">Race</th>
<th align="center">Achievement Points</th>
</tr>
</thead>
<?php
$count = 0;
foreach($json->members as $p) {
$mrank = $p->rank;
$mname = $p->character->name;
$mclass = $p->character->class;
$mrace = $p->character->race;
$mgender = $p->character->gender;
$mlevel = $p->character->level;
$mthumb = $p->character->thumbnail;
$machievement = $p->character->achievementPoints;
$colour = "default";
$mraceImage = "images/inv_misc_questionmark.jpg";
$mclassImage = "images/inv_misc_questionmark.jpg";
$mgrank = "";
// Alot of if statements go here that just display how some of the content is display, already tested and they do not cause the problem.
if ($count%2==0) {
echo "<tbody>";
echo "<tr class=\"even\">";
echo "<td class=\"roster-avatar\"><img src=\"http://us.battle.net/static-render/us/".$mthumb."?alt=/wow/static/images/2d/avatar/".$mrace."-".$mgender.".jpg\" width=\"40\" height=\"40\" class=\"".$colour."\"></td>";
echo "<td class=\"roster-name\"><span class=\"".$colour."\">".$mname."</span></td>";
echo "<td align=\"center\">".$mgrank."</td>";
echo "<td align=\"center\">".$mlevel."</td>";
echo "<td align=\"center\"><img src=\"".$mclassImage."\" /></td>";
echo "<td align=\"center\"><img src=\"".$mraceImage."\" /></td>";
echo "<td align=\"center\">".$machievement."</td>";
echo "</tr>";
echo "</tbody>";
} else {
echo "<tbody>";
echo "<tr class=\"odd\">";
echo "<td class=\"roster-avatar\"><img src=\"http://us.battle.net/static-render/us/".$mthumb."?alt=/wow/static/images/2d/avatar/".$mrace."-".$mgender.".jpg\" width=\"40\" height=\"40\" class=\"".$colour."\"></td>";
echo "<td class=\"roster-name\"><span class=\"".$colour."\">".$mname."</span></td>";
echo "<td align=\"center\">".$mgrank."</td>";
echo "<td align=\"center\">".$mlevel."</td>";
echo "<td align=\"center\"><img src=\"".$mclassImage."\" /></td>";
echo "<td align=\"center\"><img src=\"".$mraceImage."\" /></td>";
echo "<td align=\"center\">".$machievement."</td>";
echo "</tr>";
echo "</tbody>";
}
$count++;
}
?>
</table>
<script type="text/javascript">
$(document).ready(function()
{
$("#gRoster").tablesorter();
}
);
</script>
</div><!--- roster --->
I see two possibilities: