jQuery table sorter on tables being received thru AJAX
I am writing a script that will allow me to search torrent sites. On page load, the left side has a text area to search and to the right an empty div. The search uses AJAX to pull a table of the search results and append to the empty/non-empty div on the right. I want to use the jQuery plugin tablesorter to sort said tables. On the backend, I am looping the search POST by line, forming my table, then outputting. Below is the inside of the loop:
$tables .= "<div align='right' style='border:solid 2px grey'>
<div class='subheader'>
$file
<input type='button' value='F This' onclick='toggleVis(\"$file.div\")'>
</div>
<div id='$file.div'>
<table RULES=ROWS FRAME=HSIDES border='1' class='tablesorter' id='$file.table'>
<thead>
$headStr
</thead>
<tbody>
$bodyStr
</tbody>
</table>
<input type='button' value='F That--^' onclick='toggleVis(\"$file.div\")'>
</div>
</div>
<br>";
After all data has been processed, I am just echoing $tables. Below is the AJAX call + jquery initialization:
function doSearch(){
var http;
try{
// Opera 8.0+, Firefox, Safari
http = new XMLHttpRequest();
} catch (e){
// Internet Exploder
try{
http = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
http = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Bad
alert("Your browser derped!");
return false;
}
}
}
http.onreadystatechange = function(){
if(http.readyState == 4){
if(document.getElementById('clearResults').checked)
document.getEl开发者_JAVA百科ementById('searchResults').innerHTML = http.responseText;
else
document.getElementById('searchResults').innerHTML += http.responseText;
$("table").tablesorter(); // Initialize tablesorting
}
}
search = encodeURIComponent(document.getElementById('search').value);
document.getElementById('search').value = '';
http.open("POST", "<?php echo $_SERVER['PHP_SELF']; ?>", true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
http.send('lAct=search&search='+search);
}
So the above code executes flawlessly, but the new table does not have sorting. Interestingly enough, initializing the tablesorter is actually changing the class of my th els to "header" - which implies that it is working? For giggles, I added a static table on the page; it becomes sortable after the search function is called (along with the changed th classes). Has anyone run into anything like this? I can post more code if necessary; any help would be greatly appreciated :D
Just in case, below is the finalized table that is being output:
<div id="ubuntu.div">
<table rules="ROWS" frame="HSIDES" border="1" class="tablesorter" id="ubuntu.table">
<thead>
<tr><th class="header">Type</th><th class="header headerSortDown">Size</th><th class="header">SE</th><th class="header">LE</th><th class="header">name</th><th class="header">dl</th></tr>
</thead>
<tbody>
<tr class="highlight" id="ubuntu.0"></tr><tr class="highlight" id="ubuntu.0"><td>Video(Other)</td><td><b>267.45MiB</b></td><td>7</td><td>1</td><td>VTC Ubuntu Certification</td><td>
</td>
</tr><tr class="highlight" id="ubuntu.1"><td>Video(Other)</td><td><b>10.62MiB</b></td><td>1</td><td>1</td><td>Nelson Mandela explains Ubuntu (ideology)</td><td>
</td>
</tr>
</tbody>
</table>
<input type="button" value="F That--^" onclick="toggleVis("ubuntu.div")">
</div>
I also just noticed that as I am clicking the table headers, the class is changing to include SortDown or SortUp...weird that it's not sorting...
There are two rows with the same ID, the first one being empty:
<tr class="highlight" id="ubuntu.0"></tr>
<tr class="highlight" id="ubuntu.0">...</tr>
精彩评论