Question

Here’s the issue: I’m using JQuery tablesorter to paginate a table. Table rows are fetched from database, like this:

//list players by points (default listing)
$result=mysql_query("select * from players order by pts_total") or die(mysql_error());
echo "<table id='list_table' class='tablesorter'><thead><tr><th width='25px'>Pos</th><th width='200px'>Player</th><th width='25px'>Club</th><th width='25px'>Value</th><th width='25px'>Points</th></tr></thead><tbody>";
while($row=mysql_fetch_array($result)){
    //get team logo
    $result1=mysql_query("select amblem from real_teams where team_name='$row[team]' ") or die(mysql_error());
    $row1=mysql_fetch_array($result1);
    echo "<tr>";
    echo "<td>T</td>";
    echo "<td>".$row['name']."</td>";
    echo "<td style='text-align:center;'><img src='".$row1['amblem']."' height=16px title='".$row['team']."'></td>";
    echo "<td>".$row['current_value']."</td>";
    echo "<td>".$row['pts_total']."</td>";
    echo "</tr>";
}
echo "</tbody></table>";

That all works fine, the table is paginated, it lists football players. But the thing is, I have a dropdown where the user should be able to choose to display only players who play a certain position (that info is in the same database table):

<select name="show_positions" id="show_positions" onChange="showPlayers(this.value)">
<option value="A">All Positions</option>
<option value="G">Goalkeepers</option>
<option value="D">Defenders</option>
<option value="M">Midfielders</option>
<option value="S">Strikers</option>
</select>

It calls an Ajax function which displays a table with only players who play a certain position, and it does what it’s supposed to but the table is no longer paginated. Instead it display one big table. I assume it’s because the Javascript that paginates it isn’t processed since the page isn’t being reloaded? Is there a way to call the Javascript function again during the Ajax call? Here’s the Ajax and the PHP file it calls:

<script type="text/javascript">
function showPlayers(str)
{
if (str=="")
  {
  document.getElementById("inner_list").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("inner_list").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","listplayers.php?q="+str,true);
xmlhttp.send();
}
</script>

listplayers.php:

<?php
include('../include/db.php');
dbConnect('dbname');

$pos=$_GET['q'];
if ($pos=="A")
    $pos="";

//list players by points (default listing)
$result=mysql_query("select * from players where position LIKE '%$pos%' order by pts_total") or die(mysql_error());
echo "<table id='list_table' class='tablesorter'><thead><tr><th width='25px'>Pos</th><th width='200px'>Player</th><th width='25px'>Club</th><th width='25px'>Value</th><th width='25px'>Points</th></tr></thead><tbody>";
while($row=mysql_fetch_array($result)){
    //get team logo
    $result1=mysql_query("select amblem from real_teams where team_name='$row[team]' ") or die(mysql_error());
    $row1=mysql_fetch_array($result1);
    echo "<tr>";
    echo "<td>T</td>";
    echo "<td>".$row['name']."</td>";
    echo "<td style='text-align:center;'><img src='".$row1['amblem']."' height=16px title='".$row['team']."'></td>";
    echo "<td>".$row['current_value']."</td>";
    echo "<td>".$row['pts_total']."</td>";
    echo "</tr>";
}
echo "</tbody></table>";
?>

And the tablesorter JQuery, which is in the head of the page:

<script type="text/javascript">
$(document).ready(function() { 
    $("table") 
    .tablesorter({widthFixed: true, widgets: ['zebra']}) 
    .tablesorterPager({container: $("#pager"), size: 20}); 
}); 
</script>

Answer 1

in the callback handler, aftyer you inserted the table in the DOM, you should call the tablesorter plugin again on the table to re-initialize it

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
  document.getElementById("inner_list").innerHTML=xmlhttp.responseText;
  $("#list_table").tablesorter( );
}

To be sure to use always the same options you could save them in an object

$(document).ready(function(){
   var list_table_options = {sortList: [[0,0], [1,0]]};
  $("#list_table").tablesorter( list_table_options );
});