Ajax-Tabelle sortierbar machen

[Kalle_B]

Hallöle,

in ein HTML- Dokument füge ich mit Ajax eine Tabelle ein. Grund: Diese Tabelle ist nach Spalten sortierbar. Bei Klick auf eine Spalte schickt PHP eine neu sortierte Tabelle, der Rest der Seite bleibt stehen.

Vor ein paar Tagen bin ich auf ein Javascriptscript (halt ein Script von Javascript und nicht von Java) gestossen, das Tabellen sortierbar machen kann. Vielleicht kennt es der eine oder andere:
http://yoast.com/articles/sortable-table/

Das funktioniert wunderbar, wenn ich meine "Ajax-Tabelle" per http aufrufe, aber nicht, wenn ich sie mit Ajax aufrufe.

Gut, ich denke, dass ein Teil-Dokument nicht den onLoad- Trigger auslöst, wenn es geladen ist. Der wird in dem Scriptscript aber benötigt:

  
addEvent(window, "load", sortables_init);  
  
var SORT_COLUMN_INDEX;  
var thead = false;  
  
function sortables_init() {  
  // Find all tables with class sortable and make them sortable  
  if (!document.getElementsByTagName) return;  
  tbls = document.getElementsByTagName("table");  
  for (ti=0;ti<tbls.length;ti++) {  
    thisTbl = tbls[ti];  
    if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {  
      ts_makeSortable(thisTbl);  
    }  
  }  
}  

Deshalb habe ich im HMTL- Code hinter der Tabelle die Funktion sortables_init() aufgerufen, aber die Tabelle wird nicht "sortierbar" gemacht und FF meldet auch keinen Fehler.

Ist sortables_init() irgendwie blockiert, wenn onLoad nicht eintritt?

LG Kalle

[Kalle_B]

habe testweise diese Zeile auskommentiert:

//addEvent(window, "load", sortables_init);

Das Ergebnis ist das gleiche. Der "Original-Aufruf" funktioniert. Wenn die Tabelle in den DOM eingebaut ist, aber nicht.

Hier das Original und hier die Einbettung mit Ajax.

Kalle

[Kalle_B]

sorry, falsch kopiert. Nochmal ...

Hier das Original und hier die Einbettung mit Ajax.

[Kalle_B]

Der Fehler steckt offenbar in der relativen Adressierung von files.

Das per Ajax eingebundene HTML- Dokument kommt dadurch in eine andere "Umgebung" und findet die *.js- Datei nicht. Vielleicht wird noch nicht mal danach gesucht.

Kann man per Ajax überhaupt Javascript- Code einfügen und wird der dann auch durchlaufen?

Jedenfalls wird die Tabelle sortierbar, wenn ich in dem rufenden HTML- Dokument die *.js- Datei einbinde und nach Empfang des Ajax- Dokuments aufrufe:

if(http.readyState == 4)
  {
    document.getElementById( anzeigeFeldId ).innerHTML = http.responseText;
    sortables_init();
  }

Nicht ganz in meinem Sinne, denn die Sortierbarkeit sollte ja eine Eigenschaft der Tabelle sein (wie vorher mit PHP) und nicht des Elterndokuments.

Kalle

[JürgenB]

Hallo Kalle_B,

Kann man per Ajax überhaupt Javascript- Code einfügen

ja,

und wird der dann auch durchlaufen?

nein. Dazu musst du ihn extrahieren und per eval ausführen oder in ein nachträglich erzeugtes Scriptelement kopieren. Siehe hierzu http://forum.de.selfhtml.org/archiv/2008/8/t176106/#m1158168

Gruß, Jürgen

[Kalle_B]

Hallo Jürgen,

danke für deinen Hinweis.

Kalle

[Rolf]

Hallo Kalle,

um Deine Tabelle zu sortieren brauchast Du drei(3) Funktionalitäten:

• auslesen der HTML-Tabelle in ein JS-Array
• sortieren des Arrays nach eine Spalte
• schreiben des Arrays in die HTML-Tabelle

Vor jahren habe ich solche Aufgaben anders gelöst:

• die Daten stecken gleich in einem JS-Array, das einmalig von PHP erstellt wird
• je nach Aufruf wird die HTML-Tabelle komplett mit JS sortiert und erzeugt

Aber Du suchst fix und fertige Scripte ... und keine Tips, vermute ich mal.

m.b.G. Rolf

[Kalle_B]

Hallo Rolf,

Vor jahren habe ich solche Aufgaben anders gelöst:

• die Daten stecken gleich in einem JS-Array, das einmalig von PHP erstellt wird
• je nach Aufruf wird die HTML-Tabelle komplett mit JS sortiert und erzeugt

Nun ja, bei deaktivierten JS siehst du dann gar nichts.

Aber Du suchst fix und fertige Scripte ... und keine Tips, vermute ich mal.

Fertige, gut getestete Skripte erleichtern das Programmiererleben. Ich glaube, ich mache viel zu viel selbst.

LG Kalle

[Kalle_B]

Fertige, gut getestete Skripte erleichtern das Programmiererleben. Ich glaube, ich mache viel zu viel selbst.

P.S. Als Kind habe ich die deutsche Sprache nachgeplappert und keine neue erfunden. Das war gut so, sonst wäre ich jetzt Autist.

LG Kalle

[Rolf]

P.S. Als Kind habe ich die deutsche Sprache nachgeplappert und
keine neue erfunden. Das war gut so, sonst wäre ich jetzt Autist.

na-ja,
die Sprache muss man ja auch nicht neu erfinden JS jibbet schon länger.
Wenn der paranoide User JS abschaltet, wird AJAX auch ein Problem haben.

m.b.G. Rolf

PS:
Warum werden fortlaufend neue Memoaren geschrieben, ist doch immer wieder
das gleiche, geboren, gezappelt, geschrien und verreckt ... ;-)

[Kalle_B]

Wenn der paranoide User JS abschaltet, wird AJAX auch ein Problem haben.

Genau, deshalb enthält der Container, in den das Ajax- Ergebnis hinein soll, diese Form:

<div id=p121>
  <p>Wenn hier keine Liste erscheint, bitte <a href='http://saengerkreis-weschnitztal-ueberwald.de/programme/index.php?zp=p121&amp;sort_ort=abc'>klicken</a></p>
</div>

Und die Welt ist wieder in Ordnung ...

LG Kalle

[JürgenB]

Hallo Kalle_B,

wie du den gefundenen Sortierer ändern musst, weiß ich auch nicht. Meinem Tabellensortierer must du folgendermaßen modifizieren:

Das Sortierscript ist in einer anonymen Funktion "versteckt", die sofort ausgeführt wird. Dadurch wird verhindert, das es zu Überschreibungen mit anderen Scripten kommt. Allerdings kann der Sortierer daher auch nicht direkt aufgerufen werden.

Hierzu müssen ein paar kleine Veränderungen vorgenommen werden:

Die Zeilen ganz oben unter den Kommentaren

( function() {

und am Ende

})();

müssen entfernt werden.

Dann benötigst du noch eine Referenz auf die Tabelle, wenn nicht schon vorhanden, z.B. mit

var zumSortieren=getElementById("Id_der_Tabelle");

und musst noch das Sortierscript von Hand aufrufen:

new JB_Table(zumSortieren);

Evtl. können der Teil mit JB_addEvent sowie die Funktionen JB_addEvent und JB_getElementsByClass_TagName auch entfallen.

Gruß, Jürgen