Ajax와 테이블 정렬/필터링

Question

다음은 문제입니다. JQuery 테이블 스 테이퍼를 사용하여 테이블의 페이지 매김을 수행하고 있습니다. 테이블 행은 다음과 같이 데이터베이스에서 가져온 있습니다

모두가 잘 작동하는지

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

그것은 아약스 함수를 호출을하는 특정 위치를 재생하는 플레이어 만있는 테이블을 표시하고 테이블의 내용이 더 이상 페이지 지정되지 않습니다. 대신 하나의 큰 테이블을 표시합니다. 페이지가 다시로드되지 않기 때문에 페이지 매김을 처리하는 Javascript가 처리되지 않았기 때문이라고 생각합니다. Ajax 호출 중에 Javascript 함수를 다시 호출하는 방법이 있습니까? 여기에 아약스의와 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>"; 
?> 

그리고 페이지의 머리에있는 tablesorter에 JQuery와 :

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

Answer 1

에서 콜백 핸들러, DOM에 테이블을 삽입 한 후 테이블 초기화를 위해 테이블러 플러그인을 다시 호출해야합니다.

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(), 성공 또는 실패 처리기로 작업 할 수 있으므로 매우 유용합니다.