jquery tablesorter + проблема с обновлением содержимого ajax div

У меня проблемы с обновлением содержимого 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);
} 

person Nalla    schedule 05.04.2009    source источник


Ответы (9)


После загрузки результата вам нужно сделать $("#table").tablesorter() еще раз, чтобы пересортировать его. Кроме того, вместо того, чтобы писать код ajax вручную, используйте $.get или $.post из jquery.

person Ali    schedule 05.04.2009
comment
Спасибо друг. я только что понял это и теперь использую jquery .ajax. это работает отлично. - person Nalla; 05.04.2009
comment
вызов метода trigger() должен работать, согласно моему ответу. Я подозреваю, что это может иметь меньшие накладные расходы, чем вызов .tablesorter(). - person Ryan Shripat; 03.07.2009

Вместо повторного вызова .tablesorter() вы можете инициировать обновление без каких-либо накладных расходов на вызов .tablesorter():

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

Я успешно использовал это в своем собственном проекте. Вы можете сделать вызов trigger() в обработчике :success.

ХТН

person Ryan Shripat    schedule 03.07.2009
comment
Спасибо. Это действительно полезно! Если вы пишете собственный синтаксический анализатор, убедитесь, что он возвращает правильный тип (числовой или текстовый), иначе он не будет работать для этого столбца. - person pedro_sland; 23.08.2010
comment
В моем проекте после обновления тела таблицы, как только я щелкнул сортировщик любого столбца, он заменил тело последним содержимым. Но использование этого решения (триггер (обновление)) сработало как шарм. Спасибо - person Ehsan; 29.03.2014
comment
Я пробовал этот вариант, но он не работает для меня. Новый экземпляр делает это, что означает $(#xxx).tablesorter(); - person Harm; 05.05.2015

Ваша первоначальная проблема заключалась в том, что Live Query может обнаруживать только изменения в документе, который начался с вызова jQuery.

Прямая установка innerHTML не приведет к его срабатыванию. Изменение этой строки на $("#"+divid).html(xmlHttp_one.responseText) решило бы вашу проблему.

Я рад слышать, что вы нашли решение! Имейте в виду, однако, что Live Query должен сканировать документ каждый раз, когда он изменяется, что удобно, но сильно снижает производительность. Было бы лучше поместить вызов tablesorter() в вашу функцию jQuery.ajax(success:).

person s4y    schedule 05.04.2009
comment
Большое спасибо за эту идею Сидни. Теперь я обновил свой код, добавив вызов tablesorter внутри success: , и его гораздо лучшее выполнение, а также устранил мерцание, вызванное livequery. спасибо еще раз. - person Nalla; 05.04.2009

У меня была такая же проблема, и я нашел этот метод.

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

Это не очень красиво, но это работает!

person Brahim Laarif    schedule 26.09.2011

Нашел решение, используя функцию jQuery .ajax. намного проще, и работает отлично.

person Nalla    schedule 05.04.2009

Как уже упоминалось, использование 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();
        }
    });
});
person Community    schedule 29.08.2009

Используйте функцию ajaxStop, и код запустится после завершения вызова ajax.

$("#DivBeingUpdated").ajaxStop(function(){ 
    $("table").tablesorter()
});
person Jonathan Rand    schedule 11.02.2012

Я новичок в программировании на java/ajax, но у меня точно такая же проблема: когда я обновляю содержимое div (используя ajax) с помощью своей таблицы, таблицы не работают. Если я загружаю таблицу прямо на самую первую страницу (не в div), tablesorter работает отлично.

Итак, я был бы признателен, если бы вы могли более подробно объяснить, как именно вы изменили свой код, чтобы решить эту проблему.

Спасибо, Боян

person Community    schedule 11.06.2009

Ответ не имеет отношения к заданному вопросу, но может кому-то помочь.

В случае загрузки содержимого таблицы с помощью 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 : 
            $("<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>
person alieNeha    schedule 17.03.2016