jQuery的的tablesorter + AJAX DIV内容更新问题
-
23-08-2019 - |
题
我和我的tablesorter和Ajax DIV内容更新的麻烦。一旦AJAX重新加载所有的tablesorter功能都将丢失。我试过的liveQuery,但它似乎并没有超出表的第一个上市的工作。
<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);
}
解决方案
加载结果之后,你需要做的$("#table").tablesorter()
一次重新排序。另外,而不是写手工你的Ajax代码,使用$.get
或$.post
从jquery的
其他提示
相反再次调用.tablesorter()的,则可以触发更新代替,而没有任何调用.tablesorter的开销():
("#table").trigger("update");
我在我自己的项目成功地使用这一点。你可以在你的扳机()调用:成功处理程序
HTH
您最初的问题是,实况查询只能检测对与一个jQuery调用启动文件。
直接设置innerHTML不会导致它开火。改变该行$("#"+divid).html(xmlHttp_one.responseText)
会解决你的问题。
我很高兴听到你找到了解决办法!要知道,不过,现场查询每次被修改时扫描文件 - 这是方便,但配备了一个大的性能损失。这将是更好地把呼叫你tablesorter()
功能jQuery.ajax(success:)
。
我有同样的问题,并发现此方法。
$("#table tbody tr").addClass("to-delete");
$("#table tbody").append(data);
$("#table").trigger("update");
$("#table").trigger("appendCache");
$("#table").trigger("sorton",[[[2,1],[0,0]]]);
$("#table tbody tr.to-delete").remove();
$("#table").trigger("update");
这不是很漂亮,但它的作品!
实测值通过使用jQuery阿贾克斯功能的解决方案。要容易得多,和完美的作品。
由于使用jQuery AJAX调用是最好的路要走提到:P但我发现后是有点含糊新手所以这里就是我在我的项目中使用的代码:
$('input.user').click(function() {
var getContact = $(this).val();
$.ajax({
url: 'contact_table.php',
data: 'userID='+getContacts,
success: function(result) {
$('#UserContactTable').append(result);
$("#contact-list").tablesorter();
}
});
});
使用ajaxStop功能和代码将运行AJAX调用完成后。
$("#DivBeingUpdated").ajaxStop(function(){
$("table").tablesorter()
});
我在Java / Ajax编程很新,但有完全一样的问题 - 我的表,当我更新一个div(使用AJAX)的内容,的tablesorter不起作用。如果我直接加载表格的第一页(而不是一个div),的tablesorter完美地工作。
所以,我将不胜感激,如果你能在更多的细节,你究竟是如何修改代码来解决它解释。
谢谢,博
答案是无关问的问题,但它可能帮助别人。
在经由AJAX装载台内容的情况下调用函数的tablesorter()必须AJAX调用的成功执行之后被调用。 这解释了相同的代码 - >
$(document).ready(function(){
//once the document is loaded make the AJAX call to required url
$.ajax({
url : 'nutrition.xml', //I have accessed nutrition.xml file
type : 'GET',
dataType : 'xml' //return type is xml
})
.done(function(xml){
//after successful call
/*here i have created an html string but,
one call also use appendTo() like :
$("<thead></thead>").appendTo("table"); and so on.. */
var str = "<thead><tr><th>Name</th><th>Calories</th></tr></thead><tbody>";
//loop through each element of xml filer
$(xml).find('food').each(function(i){
var name = $(this).find('name').text();
var calories = $(this).find('calories').attr('total');
//append to string
str = str + "<tr><td>"+name+"</td><td>"+calories+"</td></tr>";
});
str = str + "</tbody>";
//set html for <table>
$("table").html(str);
//the main part call tablesorter() once contents are set successfully
$("table").tablesorter({debug: true});
})
.fail(function(xhr,status,errorThrown){
//on ajax call failure
alert("An error occurred while processing XML file.");
});
});
nutrition.xml文件的内容:
<?xml version="1.0"?>
<nutrition>
<food>
<name>Avocado Dip</name>
<calories total="110" fat="100"/>
</food>
<food>
<name>Bagels, New York Style </name>
<calories total="300" fat="35"/>
</food>
<food>
<name>Beef Frankfurter, Quarter Pound </name>
<calories total="370" fat="290"/>
</food>
</nutrition>