jquery tablesorter + проблема обновления содержимого div ajax
-
23-08-2019 - |
Вопрос
У меня возникли проблемы с обновлением содержимого tablesorter и ajax div.После перезагрузки ajax все функции сортировщика таблиц теряются.Я пробовал 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");
Я успешно использовал это в своем собственном проекте.Вы можете сделать вызов триггера () в своем обработчике :success.
ХТХ
Ваша первоначальная проблема заключалась в том, что 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.гораздо проще и работает отлично.
Как уже упоминалось, лучше всего использовать вызов AJAX jquery: 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>