Tablesorter - sorting not happening
Hi
I'm new to jquery and am looking for some advice. I found some sample code, uploaded it to my site and got it working fine, so pretty content that the path to the jquery is working fine. I've since tried substituting my own table into the code instead, which has stopped the sorting from working correctly. The main difference that I can see is that the contents of my table is being pulled from a database.
Output: http://www.arabianraceform.co.uk/form/horses/00001test.php
Page code:
- <?php $result = mysqli_query($con, "SELECT runners.raceid, runners.weight, runners.rat, runners.eqp, runners.pos, runners.beat, runners.plus, runners.price, runners.jockey, race.raceid, race.dateshort, race.cshort, race.racetype, race.distf, race.run, race.ground, race.raceurl
- FROM runners
- Inner Join race On
- runners.raceid = race.raceid
- WHERE runners.horse = 'Wikkara'
- ORDER BY runners.raceid DESC"); ?>
- <?php include($_SERVER['DOCUMENT_ROOT'].'/inc/tables/horses.php');?>
- <?php mysqli_close($con);?>
Table insert code:
- <?php
- echo "<table id='keywords'>
- <thead>
- <tr>
- <th>Date</th>
- <th>Course</th>
- <th>Race Type</th>
- <th>Dist</th>
- <th>Going</th>
- <th>Weight</th>
- <th>Rating</th>
- <th>Eqpt</th>
- <th>Pos</th>
- <th>Beaten</th>
- <th>Jockey</th>
- <th>Price</th>
- </tr>
- </thead>";
- while($row = mysqli_fetch_array($result)) {
-
- include($_SERVER['DOCUMENT_ROOT'].'/inc/links.php');
-
- echo "<tbody>";
- echo "<tr>";
- echo "<td>";
- echo "<a href=".$racelink . ">" .$row['dateshort'] . "</a><br>";
- echo "<td>" . $row['cshort'] . "</td>";
- echo "<td>" . $row['racetype'] . "</td>";
- echo "<td>" . $row['distf'] . "</td>";
- echo "<td>" . $row['ground'] . "</td>";
- echo "<td>" . $row['weight'] . "</td>";
- echo "<td>" . $row['rat'] . "</td>";
- echo "<td>" . $row['eqp'] . "</td>";
- echo "<td>" . $row['pos'] . "/" . $row['run'] . "</td>";
- echo "<td>" . $row['beat'] . "" . $row['plus'] . "</td>";
- echo "<td>" . $row['jockey'] . "</td>";
- echo "<td>" . $row['price'] . "</td>";
- echo "</tr>";
- }
- echo "</tbody>";
- echo "</table>";?>
-
- <script type="text/javascript">
- $(function(){
- $('#keywords').tablesorter();
- });
- </script>
CSS Code for tablesorter
- table
- {
- border-collapse:collapse;
- width:100%;
- }
- #keywords {
- margin: 0 auto;
- font-size: 1.2em;
- }
- #keywords thead {
- cursor: pointer;
- background: #c9dff0;
- }
- #keywords thead tr th {
- font-weight: bold;
- padding: 2px 2px 2px 2px;
- }
- #keywords thead tr th span {
- padding-right: 20px;
- background-repeat: no-repeat;
- background-position: 100% 100%;
- }
- #keywords thead tr th.headerSortUp, #keywords thead tr th.headerSortDown {
- background: #acc8dd;
- }
- #keywords thead tr th.headerSortUp span {
- background-image: url('/images/tables/up-arrow.png');
- }
- #keywords thead tr th.headerSortDown span {
- background-image: url('/images/tables/down-arrow.png');
- }
- #keywords tbody tr {
- color: #555;
- }
- #keywords tbody tr td {
- text-align: center;
- padding: 2px 2px 2px 2px;
- }
- #keywords tbody tr td.lalign {
- text-align: left;
- }
- #keywords td, #keywords th, #keywords table
- {
- border: 1px solid black;
- }
Any advice would be greatly appreciated.