AJAX

Sortierbare Tabellen – Datagrids mit AJAX und Javascript

11. Mai 2007
von

Einiges zum Thema hat Vitaly bereits in unserem Smashing Magazine gesammelt. Zebratabellen und andere hübsche Dinge. Mir geht es um sortierbare Tabellen, auch Datagrids genannt, die mitunter mehr als nur bloße Tabellen darstellen. So etwas gibt es schon lange, in den Zeiten von AJAX lässt sich mehr herausholen. Solche Tabellen sind mitunter recht praktisch und kommen dem Nutzer entgegen. Wo bekommt man die modernen Tabellen her, und was ist möglich?

Das Table Kit basiert auf einem Prototype Framework. Die Spalten können nicht nur sortiert werden, sie lassen sich auch in der Breite mit Hilfe der Maus verstellen. Es gibt ein Tutorial dazu.

tablekit foto

Beispiel zwei, das PHP Live Datagrid, baut auf der XAJAX Bibliothek auf und eignet sich für große Datenmengen, die sich in der Live-Demo auf über 500 Seiten verteilen. Die Tabelle kann durchblättert werden.

xajax foto

Schlichter geht es hier zu: How to paginate, sort and search a table with Ajax and Rails ist ein ausgewachsenes Tutorial und zeigt das Tabellenbasteln mit RoR.

ruby foto

Ebenfalls in einem ausführlichem Tutorial wird das Unobtrusive Table Sort Script vorgestellt. Diverse Verbesserungen wurden bereits vorgenommen.

fredec foto

Das dhtmlxGrid zeigt sich besonders flexibel und ausgereift. Diverse Varianten und Skins existieren bereits, auch komplexe Tabellenkonstrukte sind machbar – dazu zählt auch die Ausgabe auf mehreren Seiten. Die Scripts stehen unter der GPL, wer Support wünscht kann eine kostenpflichtige Lösung beziehen.

dhtmlxgrid foto

Auch zur Yahoo UI Library gehören DataTables. Vielfältig einsetzbar zeigt man gleich mehrere Demos. Durch gefälliges Äußeres fallen die zwar nicht auf, aber das man selbst erledigen. Das abgebildete Muster erlaubt Sortierungen und Dateneingabe des Nutzers.

yahoo foto

Standardista Table Sorting

standardista foto

Elite Zebra Tables sind nicht nur gestreift, sie sind auch sortierbar.

elite foto

Sortable Tables von WebFX.

webfx foto

Desweiteren: Sortable Ajax Tables in JSON and XML with MochiKit, JavaScript Sortable Table, DHTMLGoodies und wahrscheinlich noch hundert andere…

Kauflösungen gibt es auch, wie die von Active Widgets, für die gleich 395,- USD fällig werden. Das Paket enthält allerdings weitere Anwendungen.

activew foto

In die selbe Kategorie fällt das Editable JavaScript TreeGrid. Hiermit sind geradezu monströse Tabellen möglich. Es gibt verschiedene Lizenzmodelle.

 foto

Sven Lennartz

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH.

11 Kommentare zu „Sortierbare Tabellen – Datagrids mit AJAX und Javascript

  1. Sebastian am 11. Mai 2007 um 18:02

    Sind vielleicht nicht neu, aber man kann sie immer wieder gebrauchen.

    THX for publishing

    mfg
    Sebastian

  2. Sebastian am 11. Mai 2007 um 17:16

    Datagrids sind doch nun wirklich nicht neu. Gab es doch vor geraumer Zeit schon einmal. Aber ein weiteres mal setzten AJAX-Anwendungen Daten wunderschön in Szene.

  3. Leser am 11. Mai 2007 um 20:58

    Schöne Sammlung.

    Muss ja nicht immer alles neu sein,
    sonst dürfte ja niemand mehr über etwas schreiben,
    was schon zuvor irgendwo dargestellt wurde.

  4. lea am 12. Mai 2007 um 10:22

    Vielen Dank – gerade war ich auf der Suche nach Infos zu diesem Thema.
    Gedankenleser? ;)

  5. mg am 12. Mai 2007 um 10:23

    Na super! Dr. Web steht wieder mal für nicht vorhandene Qualität. Und welches DataGrid soll denn nun der dumme Anwender mit hingewursteltem HTML-Code verwenden?

    Ich steh jedenfalls mehr für (wohl die derzeit beste JS-Bibliothek und Widget Sammlung überhaupt):
    http://www.extjs.com/

    Irgendwelche Listen krieg ich jedenfalls über Google auch. Es ist echt schade, dass Dr. Web seinen „Status“ hier ausnützt, und Blog-Reader nur mit dummen Listen vollmüllt.

  6. Paul am 12. Mai 2007 um 21:53

    @ mg

    ??? Was geht mit dir?
    lese dir doch mal die vorigen Beiträge durch, Spast!

    Und wen es interessiert, der wird doch eh noch nach weiteren suchen

  7. Webdesigner München am 16. Mai 2007 um 19:46

    Ich würde sagen mg wollte nur ein wenig “Schleich”-Werbung machen!?
    Und einige Leser durch seine bitterböse Art dazu verleiten auf extjs.com zu schauen *tztztz*

  8. [...] Mehr auf DrWeb » Bookmark: [...]

  9. [...] wie Sand am Meer. Aber vielleicht helfen diese Links ein wenig weiter: Yahoo! UI Library: DataTable Sortierbare Tabellen – Datagrids mit AJAX und Javascript | Dr. Web Weblog [...]

  10. Anthony am 8. August 2007 um 15:56

    Hi, super Auflistung, danke! Ich benötige eine sortierbare Liste, deren Werte sich automatisch aktualisieren.

    Weiss jemand, wo ich ein Demo/Sourcecode finden könnte?

    Danke + Gruss,
    Anthony

  11. [...] Sortierbare Tabellen – Datagrids mit AJAX und Javascript [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!

*