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
ähnliche Artikel
- 2. Februar 2008 -- Zebratabellen mit Javascript (24)
Und noch ein Tabellenskript. Eine große Tabelle...
- 28. November 2007 -- Tabellen sortieren (226)
Das Skript macht eine HTML-Tabelle sortierbar. Die...
- 6. August 2019 -- CAS Nummer validieren (0)
Wieder ein kleines Skript aus dem Bereich Chemie. Um...
62 mal gelesen.
10 Kommentare
direkt zum Formular »
Seiten:
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.
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.
29. November 2024: 13:57
und sehe gerade das die Uhrzeit im Blog falsch ist.
29. November 2024: 12:58
jetzt müsste sie stimmen.
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?
29. November 2024: 13:50
im prinzip das gleiche. Das sieht bei mir so aus:
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.
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.
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.
2. Dezember 2024: 19:43
1. kann ich nicht nachvollziehen. Du kannst auch eine Tabelle in einer Tabelle sortieren.
2. das geht mit dem Skript so nicht. Die neu berechnete Position ist abhängig von der Position am Anfang und wird nach jeder Sortierung relativ dazu neu gesetzt. Das funktioniert nicht wenn die Zeilen unterschiedlich hoch sind.
3. Es gibt ein Event (das Beispiel blendet die Tabelle aus):
// get position of each row
ruler = rows.map(row => row.dataset.originalTop = row.getBoundingClientRect().top);
table.addEventListener("transitionend", (e) => (table.style.display= 'none'));