jQuery tablesorter - utrata funkcjonalności po wywołaniu AJAX

Question

Niedawno eksperymentowałem z wtyczką tablesorter dla jQuery. Udało mi się go uruchomić i uruchomić w jednej instancji i jestem pod wrażeniem. Jednak próbowałem zastosować tablesorter do innej tabela, tylko napotykać pewne trudności ...

Zasadniczo tabela powodująca problem ma powyżej <ul>, który działa jako zestaw zakładek dla tabeli. więc jeśli klikniesz jedną z tych kart, zostanie wykonane wywołanie AJAX, a tabela zostanie ponownie wypełniona wierszami odpowiadającymi klikniętej zakładce. Po początkowym załadowaniu strony (tj. Przed kliknięciem na kartę) funkcja tablesorter działa dokładnie zgodnie z oczekiwaniami.

Ale po kliknięciu karty i ponownym zasiedleniu tabeli, funkcja znika, renderując ją bez funkcji sortowalnej. Nawet jeśli wrócisz do oryginalnej zakładki, po kliknięciu innego funkcja nie powróci - jedynym sposobem na to jest fizyczne odświeżenie strony w przeglądarce.

Widziałem rozwiązanie, które wydaje się podobne do mojego problemu na tej stronie, a ktoś zaleca użycie wtyczki jQuery, livequery. Próbowałem tego, ale bezskutecznie :-(

Jeśli ktoś ma jakieś sugestie, byłbym najbardziej wdzięczny .Po umieszczeniu fragmentów kodu, jeśli to by pomogło (chociaż wiem, że kod instancji dla tablesorter jest w porządku, ponieważ działa na stoliki bez zakładek - tak na pewno nie jest to)

EDIT: Zgodnie z wnioskiem, oto niektóre fragmenty kodu:
tabeli są klasyfikowane jest <table id="#sortableTable#">..</table>, kod instancji dla tablesorter używam jest:

$(document).ready(function() 
{ 
    $("#sortableTable").tablesorter(
    { 
     headers: //disable any headers not worthy of sorting! 
     { 
      0: { sorter: false }, 
      5: { sorter: false } 
     }, 
     sortMultiSortKey: 'ctrlKey', 
     debug:true, 
     widgets: ['zebra'] 
    }); 
}); 

I próbował sklecić livequery następująco:

$("#sortableTable").livequery(function(){ 
    $(this).tablesorter(); 
}); 

to nie pomogło ... chociaż nie jestem pewien, czy powinienem używać id tabeli z livequery gdyż jest kliknięcie na <ul> Powinienem odpowiadać, co oczywiście nie jest częścią samej tabeli. Próbowałem wielu odmianach, w nadziei, że jeden z nich będzie pomóc, ale bezskutecznie :-(

Answer 1

Czy próbowali nazywając

$("#myTable").tablesorter(); 

po kodzie gdzie można obsługiwać i kliknij na zakładkę repopulate tabeli ??? Jeśli nie, po prostu spróbować.

Answer 2

może być tak, że jak twoja druga tabela jest tworzona z AJAX, że trzeba ponownie powiązać wydarzenia. możesz użyć wtyczki LiveQuery

http://docs.jquery.com/Plugins/livequery

, które mogą "auto-magicznie" pomóc w rozwiązaniu problemu.

edytuj: przepraszam, po prostu przeczytaj ponownie swój wpis i zobaczysz, że już próbowałeś.

---

Aktualizacja. Zrobiłem szybkie uprząż, która, mam nadzieję, pomoże. Na górze są 3 LI, każdy ma inny sposób aktualizowania zawartości tabeli.Ten ostatni aktualizuje zawartość i utrzymuje zamawiania

<script src="jquery-1.3.js" type="text/javascript" ></script> 
    <script src="jquery.livequery.js" type="text/javascript" ></script> 
    <script src="jquery.tablesorter.min.js" type="text/javascript" ></script> 

<script> 

var newTableContents = "<thead><tr><th>Last Name</th><th>First Name</th> 
<th>Email</th><th>Due</th><th>Web Site</th></tr></thead> 
<tbody><tr><td>Smith</td><td>John</td><td>jsmith@gmail.com</td><td>$50.00</td> 
    <td>http://www.jsmith.com</td></tr><tr><td>Bach</td><td>Frank</td><td>fbach@yahoo.com</td> 
<td>$50.00</td><td>http://www.frank.com</td></tr></tbody>"; 


$(document).ready(function() 
    { 
     $("#addData").click(function(event){ 
     $("#sortableTable").html(newTableContents); 
    }); 

    $("#addLivequery").livequery("click", function(event){ 
     $("#sortableTable").html(newTableContents); 
    }); 

    $("#addLiveTable").livequery("click", function(event){ 
     $("#sortableTable").html(newTableContents); 
     $("#sortableTable").tablesorter({ }); 
    }); 

    $("#sortableTable").tablesorter({ }); 
    }); 
</script> 

     <ul> 
      <li id="addData" style="background-color:#ffcc99;display:inline;">Update Table</li> 
      <li id="addLivequery" style="background-color:#99ccff;display:inline;">Update Table with livequery</li> 
      <li id="addLiveTable" style="background-color:#99cc99;display:inline;">Update Table with livequery & tablesorter</li> 
     </ul> 

     <hr /> 
     <table id="sortableTable"> 
     <thead> 
     <tr> 
      <th>Last Name</th> 
      <th>First Name</th> 
      <th>Email</th> 
      <th>Due</th> 
      <th>Web Site</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Jones</td> 
      <td>Joe</td> 
      <td>jjones@gmail.com</td> 
      <td>$100.00</td> 
      <td>http://www.jjones.com</td> 
     </tr> 
     <tr> 
      <td>French</td> 
      <td>Guy</td> 
      <td>gf@yahoo.com</td> 
      <td>$50.00</td> 
      <td>http://www.french.com</td> 
     </tr> 
     </tbody> 
     </table> 

Answer 3

Okazuje się, że musiałem dokonać pewnych modyfikacji kodu związanego AJAX, aby ponownie wywołać $("#myTable").tablesorter(..) po wyciągnięciu żadnych danych ...

Answer 4

byłem posiadające ten sam problem, z wyjątkiem tego, że ładowałem tabelę z wierszem dla każdej "kategorii", a następnie wstawiałem dane dla każdej kategorii do tabeli za pomocą wywołań asynchronicznych. Dzwonienie pod numer $("#myTable").tablesorter(..) po zwróceniu każdej z nich spowodowało, że przeglądarka zbombardowała, gdy załadowano więcej niż trywialną liczbę rekordów.

Moje rozwiązanie polegało na zadeklarowaniu dwóch zmiennych: totalRecords i fetchedRecords. W $(document).ready() ustawić totalRecords do $("#recordRows").length; i za każdym razem wypełnić rekord w tabeli, zmienna fetchedRecords jest zwiększany, a jeśli fetchedRecords >= totalRecords potem zadzwonię $("#myTable").tableSorter(..).

działa całkiem dobrze dla mnie. Oczywiście, twój przebieg może się różnić.

Answer 5

Po dołączany swoje dane, to zrobić:

$("your-table").trigger("update"); 
var sorting = [[0,0]]; 
$("your-table").trigger("sorton",[sorting]); 

To pozwoli wtyczki wiem, że miał aktualizacji i ponownego sortowania go.

Kompletny przykład podano w dokumencie:

$(document).ready(function() { 
    $("table").tablesorter(); 
    $("#ajax-append").click(function() { 
     $.get("assets/ajax-content.html", function(html) { 
      // append the "ajax'd" data to the table body 
      $("table tbody").append(html); 
      // let the plugin know that we made a update 
      $("table").trigger("update"); 
      // set sorting column and direction, this will sort on the first and third column 
      var sorting = [[2,1],[0,0]]; 
      // sort on the first column 
      $("table").trigger("sorton",[sorting]); 
     }); 
     return false; 
    }); 
}); 

Od doc tablesorter tutaj: http://tablesorter.com/docs/example-ajax.html

Answer 6

Użyj funkcji ajaxStop a kod zostanie uruchomiony po wywołaniu ajax jest kompletna.

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

Answer 7

po wywołaniu ajax kiedy zmieniła swoją zawartość HTML trzeba zaktualizować tablesorter.

TRY to dla mnie działa poprawnie

jeśli dołączanie HTML

$("table tbody").append(html); 
     // let the plugin know that we made a update 
     $("table").trigger("update"); 
     // set sorting column and direction, this will sort on the first and third column 
     var sorting = [[2,1],[0,0]]; 
     // sort on the first column 
     $("table").trigger("sorton",[sorting]); 

i po dodaniu nowej html zamiast starszego

$("table").trigger("update"); 
$("table").trigger("sorton"); 

Answer 8

Doszedłem przez ten problem ostatnio. rozwiązanie elwyn nie działało dla mnie. Ale this topic zasugerował, że problemem jest synchronizacja funkcji w zdarzeniach "update" i "sorton".

Jeśli spojrzeć w kodzie jQuery tablesorter 2.0 (ver 2.0.5b.) Kod źródłowy, zobaczysz coś takiego:

$this.bind("update", function() { 
    var me = this; 
    setTimeout(function() { 
     // rebuild parsers. 
     me.config.parsers = buildParserCache(me, $headers); 
     // rebuild the cache map 
     cache = buildCache(me); 
    }, 1); 
}).bind("sorton", function (e, list) { 
    $(this).trigger("sortStart"); 
    config.sortList = list; 
    // update and store the sortlist 
    var sortList = config.sortList; 
    // update header count index 
    updateHeaderSortCount(this, sortList); 
    // set css for headers 
    setHeadersCss(this, $headers, sortList, sortCSS); 
    // sort the table and append it to the dom 
    appendToTable(this, multisort(this, sortList, cache)); 
}); 

Tak więc problem jest to, że setTimeout sprawia, że ​​mniej prawdopodobne, że zmiana zostanie zakończone przed sortowaniem.Moje rozwiązanie było wdrożyć kolejny event „updateSort”, tak że powyższy kod stałby się:

var updateFunc = function (me) { 
    me.config.parsers = buildParserCache(me, $headers); 
    cache = buildCache(me); 
}; 
var sortFunc = function (me, e, list) { 
    $(me).trigger("sortStart"); 
    config.sortList = list; 
    var sortList = config.sortList; 
    updateHeaderSortCount(me, sortList); 
    setHeadersCss(me, $headers, sortList, sortCSS); 
    appendToTable(me, multisort(me, sortList, cache)); 
}; 
$this.bind("update", function() { 
    var me = this; 
    setTimeout(updateFunc(me), 1); 
}).bind("sorton", function(e, list) { 
    var me = this; 
    sortFunc(me, e, list); 
}).bind("updateSort", function (e, list) { 
    var me = this; 
    updateFunc(me); 
    sortFunc(me, e, list); 
}); 

Po aktualizacji danych w tabeli trzeba by wywołać tylko to nowe wydarzenie:

var sorting = [[0,0]]; 
$("#your-table").trigger("updateSort",[sorting]);