Tabelle aktualisieren mit Ajax mit Tablesorter

Ich habe eine Tabelle, die aktualisiert wird, die mit AJAX. Ich möchte den TableSorter auf diese Tabelle.

Ich bin ein Neuling in jQuery. Auf die erfolgreiche Rückkehr von AJAX, was ich hier Tue:

   success: function(html)
        {
        jQuery("#animalsinexhibit").html(html);
            jQuery("#animalsinexhibit").tablesorter({
                   debug          : true,
                   widgets        : ['zebra', 'columns'],
                   usNumberFormat : false,
                   sortReset      : true,
                   sortRestart    : true
           });
        },

Dies funktioniert gut, wenn die Seite erstmals angezeigt (d.h. in der ersten Zeit gibt es aus der AJAX-Aufruf), aber das zweite mal die AJAX zurück, ich bin immer die folgenden und keine TableSort styling und header Sortieren-Symbole erscheinen:

stopping initialization! No table, thead, tbody or tablesorter has already been initialized

Habe ich auch versucht, mit dem folgenden, ohne Erfolg:

var resort = true;
jQuery("#animalsinexhibit").trigger("update", [resort]);

Was ist der richtige Weg, befestigen Sie den TableSorter auf AJAX Daten?

Dank.

InformationsquelleAutor PaulP | 2013-12-19
  1. 4

    Es sieht aus wie Sie mit meiner Gabel von tablesorter, wenn dem so ist, dann versuchen Sie Folgendes:

    Initialisieren tablesorter in die document-ready-Funktion (es ist gut, wenn es eine leere Tabelle)

    jQuery("#animalsinexhibit").tablesorter({
    debug          : true,
    widgets        : ['zebra', 'columns'],
    usNumberFormat : false,
    sortReset      : true,
    sortRestart    : true
});

    dann innerhalb der ajax-Aufruf, da Sie ersetzen die gesamte Tabelle Inhalt (einschließlich der thead Inhalt), verwenden Sie das updateAll Methode

    success: function(html) {
    jQuery("#animalsinexhibit")
        .html(html)
        .trigger('updateAll', [resort]);
},
    • Dank Mottie. Das klappte auch, aber ich brauchte, um zu aktualisieren, meine version von TableSorter von 2.12.0 auf die neueste version zu vermeiden, eine Art Fehler in addHeaderResizeEvent.. nochmals vielen Dank.
    InformationsquelleAutor Mottie
Schreibe einen Kommentar