Animierte Tabellen Sortierung [Javascript ist Toll!]

28. November 2024 - 18:22

Animierte Tabellen Sortierung

Aufgrund einer Frage bei meinem alten Tabellensortierer-Skript bin ich auf ein Sortierskript auf Stackexchange aufmerksam gemacht worden. Jetzt wollte die Besucherin wissen ob meines auch animiert werden könnte. Daher habe ich einen Blick auf das Skript geworfen und versucht die Funktionalität auf meins zu übertragen.

Das Skript ist grundsätzlich sehr effektiv und auch bei großen Tabellen sehr schnell. Es sortiert nicht - wie meines - in dem die Reihen in der Tabelle innerhalb des DOM umgehängt werden, sondern es tauscht einfach die Positionen der Reihen. Darüber wird eine CSS Transition gelegt, die das dann alles animiert. Der User Redu, von dem das Skript stammt, schreibt dort auch etwas zu den Schwierigkeiten mit dieser Methode.

Die Reihen müssen alle eine definierte Höhe haben und "gestreifte" Tabellen sind nicht möglich (oder müssten irgendwie nach der Sortierung neu gefärbt werden). Das Anzeigen von Rahmen ist in den Browsern nicht konsistent und kann beim sortieren zu Lücken führen. Ein einfacher border um die einzelnen Zellen ist aber möglich und wird auch nach dem sortieren ordnungsgemäß angezeigt. Aber beim Tr oder Table Element zeigt der eine Browser diese an, der andere nicht und z.T. werden sie beim sortieren sichtbar, was widerrum von der definierten Höhe und dem Inhalt abhängt. Es gilt also, je weniger umso besser. Aber für eine rein visuelle Sortierung ist diese Methode gut geeignet, wenn die Tabelle nicht zu komplex gestaltet wurde.

Konfiguration

Die Konfiguration ist fast identisch wie beim alten Skript.

SortTable.cfg.className = 'sortable'; // Die Bezeichnung der Klasse der Tabelle
 
// Die Elemente die angezeigt werden
SortTable.cfg.up = String.fromCharCode(9650);
SortTable.cfg.down = String.fromCharCode(9660);
 
// die dazugehörigen Texte 
SortTable.cfg.alt = ['Abwärts sortieren', 'Aufwärts sortieren'];
 
// Farben des Symbols (hoch und runter)
SortTable.cfg.color = ['#222', '#000'];

Spalten Konfigurieren

Für jede Spalte können spezielle Sortiereigenschaften konfiguriert werden.

Die CSS Klasse no_sort im Headerelement (TH) verhindert das die entsprechende Spalte sortiert werden kann.

Die CSS Klasse force_string im Headerelement (TH) behandelt alle Tabelleninhalte als String.

Die CSS Klasse ignore_case im Headerelement (TH) sortiert ohne Rücksicht auf Groß und Kleinschreibung.

Zellen

Das Skript sortiert Spalten mit Zeichenketten, Input-element (text und select), Datum, IP-Nummer, Zahlen. Es berücksichigt lokale Sortierungen (Also z.b. Umlaute).

Mit data-sortkey kann eine Tabellenzelle (TD) einen anderen Sortierwert als den Anzeigewert haben.

Damit alle Tabellen auf der Seite entsprechenden vorbereitet werden, wird das Skript so aufgerufen:

    document.addEventListener('load', () => SortTable.init(), true);

Beispiel

#	Zahl	Zeichenkette	IP	Datum
Fußzeile	Fußzeile	Fußzeile	Fußzeile	Fußzeile

CSS Code

Der minimal CSS-Code für die sortierbaren Tabellen sieht so aus:

table.sortable tbody tr {
  transition: transform .5s;
  transition-timing-function: ease-in-out;
  transform: translateY(0px);
}
table.sortable tbody  tr {
  height:1.75em;
}
table.sortable th .marker {
  background-color: transparent !important;
  margin: 0px !important;
  padding: 0px !important;
  position: static !important;
  font-family: Arial;
  font-size: 80%;
  display: inline;
}

Konkret müssen aber dann Anpassungen erfolgen wenn Inhalte höher als 1em sind oder Rahmen hinzugefügt wurden. Die Animation sieht besser aus, wenn man den Zellen eine Hintergrundfarbe gibt.

Download

sorttable_anim.js

9 Kommentare

direkt zum Formular »

Seiten:

1. Kommentar von: Lydia
29. November 2024: 13:35

Moin Du Lieber,

das ist ja wunderbar.
Das funktioniert sogar, wenn mehrere Tabellen auf einer Seite sind :-(

Eine Bitte hätte ich da noch:
Die Sort-Funktion erwartet zwingend ein „thead“ „/thead“, andernfalls wird die erstet Zeile mit sortiert.
Da ich aber Tabellen dynamisch aus einer Datenbank erzeuge, ist bei mir die erstet Zeile automatisch das thead, wird aber nur als „tr td /tr /td“ eingetragen.
In dem „alten“ Script wurde das erkannt.

Ich kann aber in dem neuen Script gar keinen Hinweis auf thead finden.

Kannst Du helfen?
Liebe Grüße, L.

2. Kommentar von: struppi
29. November 2024: 13:56

Das alte Skript hat, wie du richtig bemerkt hast, die erste Zeile automatisch als thead identifiziert und das DOM entsprechend umgebaut. Ich hab’s umgebaut und wird so gegen 15Uhr online sein.

3. Kommentar von: struppi
29. November 2024: 13:57

und sehe gerade das die Uhrzeit im Blog falsch ist.

4. Kommentar von: struppi
29. November 2024: 12:58

jetzt müsste sie stimmen.

5. Kommentar von: Lydia
29. November 2024: 13:28

Huii, das ging flott.
Ich habe es ehrlich gesagt gerade schon implementiert.
Allerdings ist mein javascript-Status: Anfängerin mit Ambitionen.
Ich prüfe in der INI, ob es einen Head gibt, falls nicht, rufe ich eine gesonderte Funktion auf, erstelle ein Head und verschiebe die erste Zeile dorthin :-)

Ich bin gespann auf Deine Lösung, lerne gerne was dazu!!!

—

Noch eine Kleinigkeit.
Über eine table-class wird die Tabelle zum zebra.
Natürlich sortiert Deine Funktion das zebra mit. Kann man nach der Sortierung die „richtige“ zebra-Einstellung wieder herstellen bzw. die table-classes neu auslösen?

6. Kommentar von: struppi
29. November 2024: 13:50

im prinzip das gleiche. Das sieht bei mir so aus:

	var header = table.tHead;
	if(!header) {
		/**
		 * if there is no thead-element 
		 * create a new and put the first line into
		*/
		header = table.createTHead();
		header.appendChild(table.tBodies[0].rows[0]);
	}

7. Kommentar von: struppi
29. November 2024: 13:53

zu deiner 2. Frage. das mit dem zebra ist ein Problem bei dieser Methode, da die Reihenfolge für das CSS im DOM sich ja nicht ändert. Man müsste das halt umständlich über Klassen machen, die beim sortieren eingefügt oder gelöscht werden.

8. Kommentar von: Lydia
29. November 2024: 15:54

Ich verstehe das jquery nicht, sieht deutlich besser aus und ist kürzer.

Nun noch ein 2 kleine Probleme :-)

1) Wenn ich eine table in einer table habe, die sortiert werden soll, dann bekommt die tr vom th ein data-original-top, was ja falch ist.
Ich have schon versucht, das data-original wieder zu löschen, erfolglos :-(
table
tr td

table
thead
tr data-original-top
th /th
/tr
/thead
/table

/td /tr /table

—

2.Wenn eine Reihe höher ist als eine andere, wird die Höhe (von den Zellen) nicht mitsortiert. Auch nicht über das CSS.

Über das row.getBoundingClientRect().height müsste die Höhe doch ermittelbar sein.
1. Kann man das als data-Objekt nicht auch eintragen und dann die Höher nach dem Sortieren wieder setzen?
oder
2. Könntest Du mir sagen, wann das sortieren fertig ist, dann versuche ich es selbst.

Ich hoffe, ich nerve nicht, aber ich finde das so toll, dass ich es gerne verwenden würde.

Liebe Grüße, L.

9. Kommentar von: Struppi
29. November 2024: 22:10

In der „listen“ Funktion vor dem Aufruf „setuptable“ ist die Sortierung fertig. Setuptable setzt dann die neuen Werte für die animation. Ob man deren Ende mit JavaScript detektieren kann, weiss ich nicht.

Ich denke das wird schwierig, alle Wünsche umzusetzen.

Nee,das nervt nicht. Der Blog ist ja öffentlich, hier darf jeder fragen :-)
Bin aber bis Montag nicht am rechner, kann daher bis dahin auch nichts mehr konkret machen.

Schreibe einen Kommentar Antworten abbrechen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Stop Spam Harvesters, Join Project Honey Pot

Javascript ist Toll!