jquery tablesorter + ajax div内容更新问题

我的tablesorter和ajax div内容更新有问题。 重新加载ajax后，所有的tablesorterfunction都将丢失。 我尝试过livequery但它似乎没有超出表的第一个列表。

 $(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]] }); });  // 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); } 

Answer 1

加载结果后，需要再次执行$("#table").tablesorter()重新排序。 另外，不是手动编写ajax代码，而是使用jquery中的$.get或$.post

Answer 2

而不是再次调用.tablesorter（），而是可以触发更新，而不需要调用.tablesorter（）的任何开销：

 ("#table").trigger("update"); 

我在自己的项目中成功使用了它。 您可以在：success处理程序中调用trigger（）。

HTH

Answer 3

您最初的问题是，Live Query只能检测以jQuery调用开头的文档的更改。

直接设置innerHTML不会导致它被触发。 将该行更改为$("#"+divid).html(xmlHttp_one.responseText)可以解决您的问题。

我很高兴听到您找到了解决方案！ 但请注意，Live Query必须在每次修改时扫描文档 – 这很方便但性能却很高。 最好在jQuery.ajax(success:)函数中调用tablesorter() 。

Answer 4

我遇到了同样的问题并找到了这种方法。

 $("#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"); 

它不是很漂亮，但它的工作原理！

Answer 5

通过使用jQuery .ajax函数找到了解决方案。 更容易，而且效果很好。

Answer 6

正如前面提到的那样使用jquery AJAX调用是最好的方法：P但我发现这个post对于新手来说有点模糊所以这里是我在项目中使用的代码：

  $('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(); } }); }); 

Answer 7

使用ajaxStop函数，代码将在ajax调用完成后运行。

 $("#DivBeingUpdated").ajaxStop(function(){ $("table").tablesorter() }); 

Answer 8

我是java / ajax编程的新手，但有完全相同的问题 – 当我用我的表更新div（使用ajax）的内容时，tablesorter不起作用。 如果我将表直接加载到第一页（而不是div），tablesorter完美地工作。

所以，如果你能更详细地解释你是如何修改你的代码来解决它的话，我会很高兴。

谢谢，Bojan

Answer 9

答案与提出的问题无关，但可能有助于某人。

如果通过AJAX调用加载表内容，则必须在成功执行AJAX调用后调用函数tablesorter（）。 代码解释相同 – >

  $(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 : $("").appendTo("table"); and so on.. */ var str = "NameCalories"; //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 + ""+name+""+calories+""; }); str = str + ""; //set html for  $("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文件的内容：

    Avocado Dip    Bagels, New York Style     Beef Frankfurter, Quarter Pound