Tabellen – Daten übersichtlich darstellen, aufbereiten, zusammenfassen und im besten Fall noch bearbeiten. Die Wünsche, mit denen Entwickler hier konfrontiert werden, sind vielfältig, meist nachvollziehbar und völlig klar. Und doch sind sie nicht immer einfach umzusetzen, unabhängig von der eingesetzten Technologie.

Der erste Ansatz ist dabei stets mit den Bordmitteln der Umgebung auszukommen und so Komplexität, Aufwand und Wartbarkeit im Rahmen zu halten. Leider gibt es hier Grenzen, die mit Bordmitteln nicht sinnvoll überwindbar sind. Fällt die Abwägung dann zugunsten der Anforderung aus, so muss eine alternative Lösung gefunden werden.

Auch der TD Mobile ist hier ein Paradebeispiel. In Kindertagen mit einer „einfachen“ Liste im Kontext des Master-Detail-Konzeptes gestartet, kam später – auch auf Wunsch vieler Entwickler – eine „echte“ Tabelle als neues GUI-Element hinzu. Diese adressierte viele der Wünsche vom Filtern, über das Sortieren bis hin zum echten Bearbeiten innerhalb der Tabelle reichen nun die Möglichkeiten. Auch auf das Aussehen hat man größeren Einfluss. Aber natürlich gibt es auch hier Grenzen, bei denen der Aufwand die Machbarkeit schlägt. Also muss man Anforderungen aufgrund der Machbarkeit verwerfen? Oder aus dem Rahmen des TD Mobile ausbrechen, die Vorteile der IDE opfern und damit den Aufwand und Komplexität sprengen? So schwarz und weiß sind die Möglichkeiten zum Glück nicht. Wir zeigen Ihnen im Folgenden eine Möglichkeit einfach und auf den Konzepten des TD Mobile basierend eine der „Großen“ der HTML-Tabellen, die jQuery DataTables, einzubinden.
Ausgangspunkt ist ein HTML-Control, was letztlich als div-Element gerendert wird, und die Einbindung der jQuery DataTables-Bibliotheken und -Stylesheets. Im HTML-Control wird eine Tabelle dann einfach zum Beispiel als <table id=“example“ class=“display></table> definiert. Wichtig dabei ist die Id, da diese im Verlauf als Referenz für Zugriffe dient. Im simplen statischen Fall kann man die Daten gleich bei der Tabellendefinition übergeben und muss die Tabelle dann lediglich noch initialisieren (siehe pageStaticTable im verlinkten Beispiel). Dieser Fall dürfte aber deutlich weniger praktische Relevanz haben als die dynamische Variante, welche erst zur Laufzeit mit Daten zum Beispiel aus einer Datenbank befüllt werden soll. Diese Variante ist im verlinkten Beispiel in der Seite pageDynamicTable exemplarisch umgesetzt. Man sieht, dass trotz des Einsatzes einer Fremdkomponente zur Visualisierung und ggf. Bearbeitung der Daten, die TD Mobile-Konzepte weiter greifen und mit wenigen Codezeilen die Tabelle mit den TD Mobile-Bindings verknüpft werden kann. Vergleiche dazu folgenden Code-Auszug aus dem Beispiel:

var dataSet = Td.Data.Binding.get("data").getValue();

$('#example').DataTable( {
    data: dataSet,
    columns: [
        { "data": "Name", title: "Name" },
        { "data": "Position", title: "Position" },
        { "data": "Office", title: "Office" },
        { "data": "Extn", title: "Extn." },
        { "data": "StartDate", title: "Start date" },
        { "data": "Salary", title: "Salary" }
    ]
} );

Wenige Zeilen JavaScript-Quellcode reichen dafür aus. Man hat somit also die Einfachheit der TD Mobile-Umgebung mit den Möglichkeiten der jQuery DataTables verknüpft und ganz neue Umsetzungsvarianten geschaffen.
Sicher ist dies nur ein oberflächliches Beispiel, um die Machbarkeit zu demonstrieren, aber das Vorgehen hat sich in unseren Projekten auch in komplexen Situationen bewährt – und das nicht nur bei Tabellen.

Das Code-Beispiel finden Sie hier.

Preisaktion
Vom 03.01. – 31.01.2022 gewähren wir 25% Rabatt auf die TD Mobile Lizenz. Der Rabatt ist auch gültig für Upgrades.

Wartung in Höhe von 1.006,95 EUR ist verpflichtend. Der Wartungsvertrag ist nicht rabattfähig. Die Wartung beinhaltet neben Produktwartung für ein Jahr auch die techn. Hotline durch den Hersteller.

Unsere Dienstleistungen zum TD Mobile
Online – TD Mobile: Entwickeln von Anwendungen für mobile Endgeräte mit TD Mobile
TD Mobile – Entwickeln von Anwendungen für mobile Endgeräte mit TD Mobile
Workshop: Entwickeln von Anwendungen für mobile Endgeräte mit TD Mobile

Gern freuen wir uns in diesem Zusammenhang auf Feedback, Anmerkungen, aufgezeigte andere Wege oder auch Fragen, Kontakt info@md-consulting.de.
Sie haben Fragen oder benötigen Unterstützung bei der Umsetzung dieses oder anderer Themen, sprechen Sie uns gern an: E-Mail oder rufen Sie uns an unter +49 (0)8122-9740-0.