jquery tablesorter+ajax div 콘텐츠 업데이트 문제
https://stackoverflow.com/questions/718307
-
23-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 데 문제가 내 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에서
다른 팁
.tablester ()를 다시 호출하는 대신 .tablester ()를 호출하는 오버 헤드없이 대신 업데이트를 트리거 할 수 있습니다.
("#table").trigger("update");
나는 이것을 내 프로젝트에서 성공적으로 사용했습니다. 성공 핸들러에서 트리거 () 호출을 할 수 있습니다.
HTH
원래 문제는 Live Query가 jQuery 호출로 시작된 문서의 변경 만 감지 할 수 있다는 것입니다.
InnerHTML을 직접 설정하면 발사되지 않습니다. 그 라인을 변경합니다 $("#"+divid).html(xmlHttp_one.responseText) 문제를 해결했을 것입니다.
당신이 해결책을 찾았다는 소식을 듣고 기쁩니다! 그러나 Live Query는 문서가 수정 될 때마다 문서를 스캔해야한다는 것을 알고 있어야합니다. 이는 편리하지만 큰 성능이 적용됩니다. 전화를하는 것이 더 낫습니다 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 .ajax 함수를 사용하여 솔루션을 찾았습니다. 훨씬 쉽고 완벽하게 작동합니다.
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 사용)의 내용을 업데이트 할 때 Tablesterter는 작동하지 않습니다. 테이블을 첫 번째 페이지 (DIV가 아닌)에 직접로드하면 TablesTorter가 완벽하게 작동합니다.
따라서 코드를 해결하기 위해 코드를 정확히 수정 한 방법에 대해 자세한 내용으로 설명 할 수 있다면 큰 도움이됩니다.
고마워요, 보얀
대답은 무관을 묻는 질문에 그러나 그것은 도움이 될 수 있습니다.
선적의 경우에는 테이블의 내용은 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>
