jquery tablesorter ajax tabelle nur sortierung einer richtung

Question

Ich habe eine tabelle, die ich über einen jQuery laden befehl laden. Im Callback der Ladefunktion initiiere ich das Tablesorter Plugin. Aus irgendeinem Grund sortiert die Tabelle nur absteigend, nicht aufsteigend. Noch seltsamer, wenn ich Shift halte, wird zwischen Asc und Desc umgeschaltet. Irgendeine Idee, was hier vor sich geht?

Table.php

<table id="xyz"> 
<thead> 
    <tr> 
     <th>hi</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>b</td> 
    </tr> 
    <tr> 
     <td>c</td> 
    </tr> 
</tbody> 
</table> 

jquery

$("#myDiv").load("table.php", function() { 
    $("#xyz").tablesorter(); 
}); 

wenn ich über Ajax in der Tabelle nicht laden dann die tablesorter Funktionen wie erwartet.

Answer 1

Okay, also war ich doppelt verbindlich wie Jason dachte.

Ich rief tatsächlich Ladefunktion von jQuery auf einer Klasse und ich hatte zwei Divs mit dieser Klasse auf meiner Seite. Also hat es eigentlich die Callback-Funktion zweimal aufgerufen?

Ich denke, es ist ein seltsames Verhalten, da der Inhalt, der in beide divs geladen wird, der gleiche ist, aber es sieht so aus, als ob jQuery einen separaten Ajax-Aufruf für jede divs ausführt. Danke für deine Kommentare!

Answer 2

Problem ist bereits gelöst, aber ich werde erwähnen, dass ich das gleiche Problem hatte. Der Grund war in der alten Version von Jquery: Ich hatte 1.4.2, 1.4.4 wurde benötigt.

Answer 3

Ich dachte nur, ich würde eine andere Antwort hier oben werfen, für den Fall, dass noch jemand in diese Sache hineinläuft. Das ist mir passiert, als ich versucht habe, .tablesorter() in einer Tabelle aufzurufen, die einen Klassenselektor anstelle eines ID-Selektors verwendet. So ändert es von

$('.tablesorter').tablesorter();

zu

$('#tablesorter').tablesorter();

(und das Markup dies widerzuspiegeln) fixiert dieses Problem für mich.

Answer 4

Noch einmal, wie dies gelöst wurde, möchte ich mein anderes Szenario teilen.

My Tischkörper Zeilen dynamisch aus einem .ajax Anruf erstellt werden, sobald ein Benutzer fügt/modifiziert/eine Zeile löscht, dann wird die Tabellenkörper Zeilen .removed() und mit dem gleichen .ajax Anruf über function() neu erstellt. Dies bindet natürlich den Tablesorter doppelt, da der Tabellenkopf übrig bleibt, was das seltsame Verhalten verursacht.

Das Update war für mich die tablesorter vor Initialisierung $('#mytable').addClass('tablesorter').tablesorter(); wie so zu lösen:

$('#mytable') 
    .unbind('appendCache applyWidgetId applyWidgets sorton update updateCell') 
    .removeClass('tablesorter') 
    .find('thead th') 
    .unbind('click mousedown') 
.removeClass('header headerSortDown headerSortUp'); 

Ein weiteres Update könnte die gesamte Tabelle in dem .ajax Anruf nicht nur den Körper <tr> ‚s zu schaffen sein.

hoffte, das hilft

Answer 5

ich hatte das gleiche Problem, aber eine andere Einstellung, und die in diesem Thread bemerken Antworten hatte mein Problem nicht behoben. Hinzufügen der Lösung für mein Szenario, falls jemand anderes das gleiche Problem hat wie ich.

Meine Tabellenkörperzeilen werden dynamisch aus einem .ajax-Aufruf beim Laden der Seite erstellt und eine Spalte wird als Standardsortierliste festgelegt, die nach dem Laden der Daten sortiert wird.

5 von 10 Spalten werden basierend auf dem Senden eines neuen Datumsbereichs erneut ausgefüllt. Ich baue den Tabellenkörper nicht neu auf, sondern injizierte die Daten in die entsprechenden Datensätze und sortiere sie dann basierend auf meiner Standard-Sortierliste.

Mein Problem war, dass nach dem Einreichen eines neuen Datumsbereichs der Tablesorter jetzt zweimal in der Kopfzeile definiert wurde. Wenn Sie also auf die Kopfzeile klicken, wird die Sortierung zweimal angezeigt.

Meine Lösung bestand darin, zu verhindern, dass der eastersorter-Header zweimal initialisiert wurde. Auf Seite zu laden, lasse ich tablesorter Art die eine Spalte I in der sortList Eigenschaft I gesetzt, aber jedes neue Datumsbereich submited, ich Benutzer die folgenden Zeilen meine Spalte nach der Datenlast zu sortieren:

$('#mytableBody').trigger("update"); 
var sorting = [[5, 1]]; 
setTimeout(function() {$('#mytableBody').trigger('sorton', [sorting]) }, 1); 

ich setTimeout um sicherzustellen, dass die Daten vor dem Sortieren vollständig geladen sind.

Hoffe, das hilft.