jQuery tablesorter - Verlust der Funktionalität nach AJAX-Aufruf

Question

Ich habe kürzlich mit dem Tablesorter-Plugin für jQuery experimentiert. Ich habe es erfolgreich einmal in Betrieb genommen und bin sehr beeindruckt. Ich habe jedoch versucht, den Tablesorter auf eine andere Tabelle anzuwenden, nur um einige Schwierigkeiten zu begegnen ...

Grundsätzlich hat die Tabelle, die ein Problem verursacht, eine <ul> darüber, die als eine Reihe von Registerkarten für die Tabelle fungiert. Wenn Sie also auf eine dieser Registerkarten klicken, wird ein AJAX-Aufruf durchgeführt, und die Tabelle wird mit den Zeilen neu gefüllt, die für die ausgewählte Registerkarte relevant sind. Wenn die Seite anfänglich geladen wird (d. H. Bevor ein Tab angeklickt wurde), funktioniert die Funktionalität von Tablesorter genau wie erwartet.

Wenn jedoch eine Registerkarte angeklickt und die Tabelle neu gefüllt wird, verschwindet die Funktionalität und wird ohne die sortierbare Funktion wiedergegeben. Auch wenn Sie nach dem Klicken auf eine andere Registerkarte zur ursprünglichen Registerkarte zurückkehren, wird die Funktionalität nicht zurückgegeben. Die einzige Möglichkeit besteht darin, die Seite im Browser physisch zu aktualisieren.

Ich habe eine Lösung gesehen, die meinem Problem auf dieser Site ähnlich zu sein scheint, und jemand empfiehlt, das jQuery-Plugin, livequery, zu verwenden. Ich habe dieses aber vergebens versucht :-(

Wenn jemand irgendwelche Vorschläge hat, würde ich am meisten schätzen. Ich kann Codeschnipsel bekanntgeben, wenn es helfen würde (obwohl ich weiß, dass der Instanziierungscode für salesorter in Ordnung ist, wie es arbeitet Tabellen ohne Tabs - es ist also auf jeden Fall nicht, dass)

EDIT: Wie gewünscht, hier sind einige Code-Schnipsel:
die Tabelle <table id="#sortableTable#">..</table> ist sortiert werden, die Instanziierung Code für tablesorter ich verwende ist:

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

Und ich versuchte zu rig up livequery wie folgt:

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

Diese wenn auch nicht geholfen hat ... Ich bin nicht sicher, ob ich die ID der Tabelle mit livequery verwenden sollte, wie es der Klick auf den <ul> ist Ich sollte darauf reagieren, was natürlich nicht Teil des Tisches ist. Ich habe eine Reihe von Variationen in der Hoffnung versucht, dass einer von ihnen helfen wird, aber ohne Erfolg :-(

Answer 1

Haben Sie versucht,

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

nach dem Code aufrufen, wo Sie den Klick auf den Reiter handhaben und besiedeln die Tabelle ??? Wenn nicht, ist es nur versuchen.

Answer 2

es kann sein, dass als zweite Tabelle mit ajax erstellt wird, die Sie brauchen, um die Ereignisse erneut zu binden. Sie können das Plugin Livequery

verwenden

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

die "magisch" mit Ihrem Problem helfen könnte.

bearbeiten: sorry, lesen Sie einfach Ihren Beitrag und gesehen, dass Sie das bereits versucht haben.

---

Aktualisierung. Ich habe ein schnelles Prüfkabel aufgebaut, das hoffentlich helfen wird. Es gibt 3 LIs an der Spitze jeder hat eine andere Art der Aktualisierung der Tabelleninhalte.Die letzte Aktualisierung der Inhalte und hält die Bestellung

<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

Es stellte sich heraus, dass ich einige Änderungen an der AJAX bezogenen Code machen musste erneut aufrufen $("#myTable").tablesorter(..) nach alle Daten ziehen ...

Answer 4

Ich hatte die Das gleiche Problem, außer dass ich eine Tabelle geladen habe, die für jede 'Kategorie' eine Zeile enthielt und dann die Daten für jede Kategorie mit asynchronen Aufrufen in die Tabelle einfügte. Der Aufruf von $("#myTable").tablesorter(..), nachdem jeder Datensatz zurückgegeben wurde, verursachte, dass mein Browser bombardierte, wenn mehr als eine unbedeutende Anzahl von Datensätzen geladen wurde.

Meine Lösung war, zwei Variablen zu deklarieren, totalRecords und fetchedRecords. Im $(document).ready() stelle ich die totalRecords zu $("#recordRows").length; und jedes Mal, wenn ich einen Datensatz in der Tabelle zu füllen, wird die fetchedRecords Variable erhöht und wenn fetchedRecords >= totalRecords dann nenne ich $("#myTable").tableSorter(..).

funktioniert ganz gut für mich. Natürlich kann Ihre Laufleistung variieren.

Answer 5

Sobald Sie Ihre Daten angehängt haben, dies tun:

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

Dies lässt das Plugin wissen, dass es ein Update hatte, und wieder sortieren sie.

Das komplette Beispiel im doc gegeben:

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

Vom tablesorter doc hier: http://tablesorter.com/docs/example-ajax.html

Answer 6

Verwenden Sie die ajaxStop Funktion und der Code wird ausgeführt, nachdem der Ajax-Aufruf abgeschlossen ist.

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

Answer 7

nach Ajax-Aufruf, wenn Ihre HTML-Inhalt geändert müssen Sie Tablesorter aktualisieren.

TRY für mich OK

arbeiten, wenn Sie 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]); 

anhängt und wenn Sie neue HTML hinzufügen, anstatt ältere

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

Answer 8

Ich bin gekommen, über dieses Problem in letzter Zeit. Elwyns Lösung funktionierte nicht für mich. Aber this topic schlug vor, dass das Problem in der Synchronisierung von Funktionen auf "update" und "sorton" -Ereignissen ist.

Wenn man sich in den Code von jQuery Tablesorter 2.0 (Version 2.0.5b.) Quellcode, werden Sie so etwas wie sehen:

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

Das Problem ist also, dass setTimeout macht es weniger wahrscheinlich, dass Update wird vor dem Sortieren beendet sein.Meine Lösung war noch ein weiteres Ereignis „updateSort“ zu implementieren, so dass obige Code werden würde:

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); 
}); 

Nachdem die Daten in der Tabelle zu aktualisieren Sie nur dieses neue Ereignis auslösen würde:

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