Dr.Web - Das Online Magazin für Seitenbetreiber

Sortierbare Tabellen - Datagrids mit AJAX und Javascript

Werbung

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.

Screenshot

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.

Screenshot

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.

Screenshot

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

Screenshot

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.

Screenshot

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.

Screenshot

Standardista Table Sorting

Screenshot

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

Screenshot

Sortable Tables von WebFX.

Screenshot

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.

Screenshot

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

Über Sven Lennartz

GravatarSven 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. Website. Weitere Beiträge für Dr. Web: 1231

Verwandte Artikel

Bookmarken! Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • MisterWong
  • del.icio.us
  • TwitThis
  • Hype
  • StumbleUpon
  • Facebook
  • Google Bookmarks
  • Linkarena
abstimmenabstimmenabstimmenabstimmenabstimmen (No Ratings Yet)

11 Kommentare zu “Sortierbare Tabellen - Datagrids mit AJAX und Javascript”

  1. 1
    Sebastian
    11.05.2007 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.

    Antwort

  2. 2
    11.05.2007 18:02

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

    THX for publishing

    mfg
    Sebastian

    Antwort

  3. 3
    Leser
    11.05.2007 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.

    Antwort

  4. 4
    12.05.2007 10:22

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

    Antwort

  5. 5
    mg
    12.05.2007 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.

    Antwort

  6. 6
    Paul
    12.05.2007 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

    Antwort

  7. 7
    16.05.2007 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*

    Antwort

  8. 8
    Anthony
    8.08.2007 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

    Antwort

Trackbacks

  1. Datagrids - Sortierbare Tabellen via AJAX und Javascript » Bloglike - WEB 2.0, SEO & Webdesign
  2. Java - wer kennt Open-Source AJAX-Tabellen - Freesoft-Board
  3. 20 frische AJAX- und Javascripts | Javascript | Dr. Web Weblog

Meine Meinung

Bitte beachten Sie: Werbung und Spam sind unerwünscht und können eine Rechnung zur Folge haben. Woher kommen die Bilder neben den Kommentaren?