Question

这是问题：我使用JQuery tablesorter分页表。表行是从数据库中提取，这样的：

//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>"; 

这一切工作正常，表进行分页，它列出了足球运动员。但事实是，我有一个下拉菜单，其中用户应该能够选择只显示谁发挥了一定的位置（即信息是在同一个数据库表）的球员：

<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> 

它调用一个Ajax功能，只显示播放某个位置的玩家的表格，并按照它的设定进行，但表格不再分页。相反，它会显示一张大桌子。我认为这是因为页面没有被重新加载，因此分页的Javascript没有被处理？有没有办法在Ajax调用期间再次调用Javascript函数？这里的Ajax和PHP文件调用：

<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>"; 
?> 

而JQuery的的tablesorter，这是在页面头部：

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

Answer 1

在回调处理程序，如果您在DOM中插入了表格，则应该再次在表格上调用tablesorter插件重新初始化该表格

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

就一定要始终使用，你可以将它们保存在同一选项中的对象

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

Answer 2

我认为这将是更好，如果你甚至使用jQuery，所以使用它的.ajax()方法，而不是简单的XMLHttpRequest()，所以你可以使用成功或失败的处理程序，这是非常有用的。