jQuery的tablesorter的+ AJAX DIV内容更新问题 [英] jquery tablesorter + ajax div content update problem
本文介绍了jQuery的tablesorter的+ AJAX DIV内容更新问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有我的tablesorter和Ajax DIV内容更新的麻烦。一旦Ajax是重新加载所有的tablesorter功能都将丢失。我试过的liveQuery，但它似乎并没有继续工作表中的第一个上市。
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（标签＆GT; UL）。标签（）;
$（＃sortabletable）。tablesorter的（{
标题：{
4：{分拣机：假}，
5：{分拣机：假}
}，
小部件：['斑马']，
sortlist中：[[0]]
}）;
}）;
$（＃sortabletable）。的liveQuery（函数（）{
$（本）.tablesorter（{
标题：{
4：{分拣机：假}，
5：{分拣机：假}
}，
小部件：['斑马']，
sortlist中：[[0]]
}）;
}）;
＆LT; / SCRIPT＆GT;
//将AJAX功能...
功能AJAX（）{
尝试{
XMLHTTP =新XMLHtt prequest（）; // Firefox，歌剧8.0+，Safari浏览器
返回XMLHTTP;
}
赶上（E）{
尝试{
XMLHTTP =新的ActiveXObject（MSXML2.XMLHTTP）; // IE浏览器
返回XMLHTTP;
}
赶上（E）{
尝试{
XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
返回XMLHTTP;
}
赶上（E）{
警报（您的浏览器不支持AJAX的。）;
返回false;
}
}
}
}
//时间戳preventing IE缓存的GET请求（常用功能）
功能fetch_unix_timestamp（）{
返回parseInt函数（新的日期（）。的getTime（）的toString（）子（0，10））
}
////////////////////////////////
//
//刷新DIV TIMEDIV
//
////////////////////////////////
功能events_listings（）{
//自定义这些设置
VAR秒= 5;
VAR DIVID =tab01;
VAR URL =events_listings.php;
//创建XMLHTTP
VAR xmlHttp_one = AJAX（）;
//没有缓存
变种时间戳= fetch_unix_timestamp（）;
VAR nocacheurl = URL +T =+时间戳;
//将code ...
xmlHttp_one.onreadystatechange =功能（）{
如果（xmlHttp_one.readyState == 4）{
的document.getElementById（DIVID）.innerHTML = xmlHttp_one.responseText;
的setTimeout（'events_listings（）'，秒* 1000）;
}
}
xmlHttp_one.open（GET，nocacheurl，真正的）;
xmlHttp_one.send（空）;
}
//开始清爽的过程
在window.onload =功能startrefresh（）{
的setTimeout（'events_listings（）'，秒* 1000）;
}
////////////////////////////////
//
//刷新DIV TIMEINWASHINGTON
//
////////////////////////////////
VAR福尔瓦=;
功能view_job（临时）{
//自定义这些设置
VAR秒= 8;
VAR DIVID =tab02;
VAR URL =view_job.php;
聚乙烯醇缩甲醛=温度;
//创建XMLHTTP
VAR xmlHttp_two = AJAX（）;
//没有缓存
变种时间戳= fetch_unix_timestamp（）;
VAR nocacheurl = URL +T =+时间戳+＆放大器;+聚乙烯醇缩甲醛;
//将code ...
xmlHttp_two.onreadystatechange =功能（）{
如果（xmlHttp_two.readyState == 4）{
的document.getElementById（DIVID）.innerHTML = xmlHttp_two.responseText;
的setTimeout（'view_job（聚乙烯醇缩甲醛）'，秒* 1000）;
}
}
xmlHttp_two.open（GET，nocacheurl，真正的）;
xmlHttp_two.send（空）;
}
//开始清爽的过程
在window.onload =功能startrefresh（）{
的setTimeout（'view_job（聚乙烯醇缩甲醛）'，秒* 1000）;
}
解决方案
加载结果之后，你需要做的 $（＃表）。tablesorter的（）再一次重新排序。此外，而不是编写AJAX code用手，用 $。获得或 $。交从jQuery的
I'm having trouble with my tablesorter and ajax div content update. Once the ajax is reloaded all the tablesorter functionalities are lost. I've tried livequery but it doesn't seem to work beyond first listing of the table.
<script type="text/javascript">
$(document).ready(function(){
$(".tabs > ul").tabs();
$("#sortabletable").tablesorter({
headers: {
4: { sorter: false },
5: { sorter: false }
},
widgets:['zebra'],
sortlist:[[0]]
});
});
$("#sortabletable").livequery(function(){
$(this).tablesorter({
headers: {
4: { sorter: false },
5: { sorter: false }
},
widgets:['zebra'],
sortlist:[[0]]
});
});
</script>
// The AJAX function...
function AJAX(){
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}
}
// Timestamp for preventing IE caching the GET request (common function)
function fetch_unix_timestamp(){
return parseInt(new Date().getTime().toString().substring(0, 10))
}
////////////////////////////////
//
// Refreshing the DIV TIMEDIV
//
////////////////////////////////
function events_listings(){
// Customise those settings
var seconds = 5;
var divid = "tab01";
var url = "events_listings.php";
// Create xmlHttp
var xmlHttp_one = AJAX();
// No cache
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
// The code...
xmlHttp_one.onreadystatechange=function(){
if(xmlHttp_one.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_one.responseText;
setTimeout('events_listings()',seconds*1000);
}
}
xmlHttp_one.open("GET",nocacheurl,true);
xmlHttp_one.send(null);
}
// Start the refreshing process
window.onload = function startrefresh(){
setTimeout('events_listings()',seconds*1000);
}
////////////////////////////////
//
// Refreshing the DIV TIMEINWASHINGTON
//
////////////////////////////////
var formvar = "";
function view_job(temp){
// Customise those settings
var seconds = 8;
var divid = "tab02";
var url = "view_job.php";
formvar = temp;
// Create xmlHttp
var xmlHttp_two = AJAX();
// No cache
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp+"&"+formvar;
// The code...
xmlHttp_two.onreadystatechange=function(){
if(xmlHttp_two.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_two.responseText;
setTimeout('view_job(formvar)',seconds*1000);
}
}
xmlHttp_two.open("GET",nocacheurl,true);
xmlHttp_two.send(null);
}
// Start the refreshing process
window.onload = function startrefresh(){
setTimeout('view_job(formvar)',seconds*1000);
}
解决方案
After loading the result, you need to do $("#table").tablesorter() once more to re-sort it. Also, rather than writing your ajax code by hand, use $.get or $.post from jquery
这篇关于jQuery的tablesorter的+ AJAX DIV内容更新问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
