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

jQuery & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...
Teaser mit jQuery erstellen Heutzutage besitzt fast jede halbwegs ernst zu nehmende Webapp ein Mini-CMS im Backend. Meistens basierend auf einem WYSIWYG-Editor in JavaScript. Eig...
HTML5 File Upload in jQuery Eine der sinnvollsten Erweiterungen von HTML5 (und wahrscheinlich auch die am meisten benutzte) ist der neue Datei-Upload. In der Vergangenheit war es...
Starke Passwörter mit jQuery Ich hatte ja erst unlängst auf ein Tutorial zum Thema Passwortstärke hingewiesen, das Thema wird immer wichtiger da der Benutzer es von sich aus nicht...

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.