Einfaches Sortieren von Tables mit jQuery

Tabellen sind so etwas wie das persönliche Waterloo des Web-Entwicklers. Verpönt für das Design führt gerade im Backend in der Regel kein Weg an dem HTML-Konstrukt vorbei, um Daten vernünftig zu visualisieren. Programmiert man die Tables vernünftig (thead, tbody, tfoot) lässt sich sogar einiges damit anfangen – zumindest bis der Kunde die Darstellung der Daten gesehen hat. Je nach Menge der Daten kommen 99,9% der Kunden auf die Idee, dass man diese Filtern können muss, und vor allem nach einzelnen Spalten sortieren.

Screenshot eines Tables mit EditableGrid

Kein großes Ding, aber eine langweilige und vor allem langwierige Aufgabe, da ich im Worst-Case eine ganze Menge Fallunterscheidungen für eine SQL-Query brauche, da ich sowohl die ORDER-BYs als auch die WHEREs dynamisch setzen muss. Was bei dem Ganzen allerdings kaum (oder nie) Beachtung findet, ist die Tatsache, dass ich zum Client die gesamte Menge an Daten schicken könnte, und diese dort mit Javascript sortieren und filtern könnte!

Gut, ich könnte jede Menge Daten haben, und bevor der Kunde überhaupt irgendetwas sieht, könnte einiges an Zeit vergehen. Erschwerend kommt hinzu das ich die Daten ja auch ändern muss und dann ggf. nach dem Editieren die Tabelle neu laden muss. Insofern können wir den obigen Wunsch um das direkte Editieren von Daten in der Tabelle mittels Ajax-Callbacks erweitern.

Also: Daten einmal zum Client senden, dieser filtert und sortiert und direkt in der Table Daten editieren sollte auch gehen. Und damit es wirklich Zeit und Arbeit spart, wollen wir das natürlich nicht Selbst machen, sondern ein jQuery-Plugin verwenden! Gibt es nicht? Gibt es doch! ;)

EditableGrid macht genau das, und im einfachsten Fall auch ohne Ajax bei bereits bestehenden HTML-Tables! Es ist also gar kein Problem sich die ganzen spezialisierten SQL-Abfragen zu sparen, und das Skript nachträglich in die Seite zu integrieren. Zusätzlich kann das Tool übrigens auch die Open Flash Chart ansprechen – hat man eine Chart die auf den Daten in einem Table beruhen, so kann man mit EditableGrid die Daten im Table ändern und der Chart übernimmt diese Änderungen sofort und live!

Ähnliche Beiträge

OpenJS Grid – Visualisierung von Daten via Ajax Ok, der Titel ist vielleicht etwas mystisch, im Endeffekt reden wir über einen mit JavaScript aufgebohrten Table ;) Ich habe mich ja schon des Öfteren...
In Place Editing mit jQuery In Place Editing ist das nächste große Ding, aber was heisst das eigentlich? Normalerweise funktionieren die meisten CMS über ein Backend, und ein Fro...
Passwortstärke mit Javascript Anzeigen Es gibt doofe Passwörter, wie zum Beispiel das Wort passwort, und es gibt relativ gute Passwörter, wie zum Beispiel p4$$w0r7, und es gibt noch bessere...
deck.js – Präsentationen in HTML Es muss nicht immer Powerpoint sein! Wenn ich eins gelernt habe in meinem ehemaligem Consulter-Leben, dann ist es das, ausreichend früh anzukommen um ...

Eine Antwort auf „Einfaches Sortieren von Tables mit jQuery“

  1. Vielen dank für wieder so ein hilfreiches artikel. Ich möchte etwas dazu sagen. Das wichtigste was man nicht vergessen soll wann man dynamisch änderungen durchführt: es bleibt ein webapp, nicht ein standalone app. Die änderungen müssen in den browser back button reflektiert worden.

    I’m going over to English, (my German is only good enough for reading purposes, sorry). What i mean is that in the Editable Grid demo the table is shown as an illustration to the article. In that case it may be justified to not reflect the state changes in the browser’s back button history. But if you are using serious table reports, for example with multipage results, the table state changes need to be registered to the browser. You do not want an unsuspecting user to hit the back button and undo all their changes.
    Although I haven’t toyed with it yet, I suspect that given its background, Editable Grid should have an option for this. It would make it a great Windows forms killer.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.