Ankündigung

Einklappen
Keine Ankündigung bisher.

Tabelle einer Datenbank darstellen

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Tabelle einer Datenbank darstellen

    Ich versuche mich gerade an der Erstellung eines Webtools zur Darstellung von Tabellen aus Datenbankinhalten. Einiges hab ich schon geschafft, komme aber jetzt nicht mehr weiter weil ich wohl einen Designfehler gemacht hab

    Kurz zum Ziel des Projektes:
    - Die Inhalte der Tabelle ergeben sich durch Datenbankabfragen. Dabei schickt das Frontend keine SQL-Select Statements, sondern spricht mit einer AJAX-API.
    - Die darzustellende Tabelle soll aufgrund von Buttons in der Kopfleiste gefiltert werden. Hinter den Buttons befinden sich dann voreingestellte Filter.
    - Neben den voreingesllten Filtern über die Buttons soll es auch die Möglichkeit geben einen Custom-Filter zu erstellen. Hierzu stelle ich mir vor mehrere Einträge logisch zu verknüpfen (und/oder/nicht). Jeder Eintrag hat links ein Dropdown der Spaltenköpfe und rechts ein Eingabefeld mit suggest-Funktion für Werte aus der gewählten Spalte.
    - Es werden immer alle Zeilen dargestellt (die je nach Filterbutton zwischen einigen wenigen und bis zu 500, 600 Einträge umfasst). Das ist eigentlich so gewünscht, damit man kleinere Listen als PDF ausgeben, ausdrucken und schnell drin suchen kann. Ich habe es bereits mal mit "paging" versucht, aber das hat die Anwender eher verwirrt als geholfen. Evtl. könnte man die Anzeige auf 100 Zeilen begrenzen und sollte das Ergebnis mehr haben, irgendeinen "Zeige weitere Datensätze" button hinzublenden... aber das ist garnicht das Kernproblem
    - Die Tabelle soll durch Klick auf den Spaltenkopf nach dieser Spalte aufsteigend sortiert werden. Durch weiteren Klick absteigend und durch nochmaligen wieder "unsortiert". Die Spalte nach der gerade sortiert wurde soll farblich hervorgehoben werden um die Sortierung zu visualisieren.
    - Die Inhalte sind neben einfachen Zahlen und Textwerten auch komplexe und berechnete Werte. Zeitangaben möchte ich z.B. wahlweise absolut ("26.06.2018 16:08 Uhr") oder relativ ("Seit 1 Stunde", "vor 3 Tagen", usw.) darstellen können. Bestimmte Spalten enthalten klickbare Links oder Buttons, welche sich aus Werten der Zeile errechnen (z.B. "Wenn Status = FERTIG dann zeige Button "Anzeigen" mit Link zu einer festen URL plus der ID vom Datensatz). Gleiches gilt für Hintergrundfarben.

    Was ich bereits implementiert habe:
    - Ich verwende bootstrap für den Stil.
    - Als MVC-Framework nutze ich CodeIgniter 3.
    - Die Datenbank ist MySQL
    - Ich habe ein CodeIgniter-Modell zur Abfrage der Datenbank
    - Ich habe div. Controller und Views um den Workflow der Applikation zu steuern

    Wo ich jetzt hänge:
    Ich habe im ersten Step beim "Start" der Applikation nur ein HTML-Gerüst ausgeliefert und auf Basis der Buttons via jQuery und AJAX den kompletten Tabelleninhalt (<tbody>) über eine API vom Controller zugeladen. Mit "kompletten Tabelleninhalt" meine ich das alle <tr> und <td>'s inkl. Formatierung und Daten vorberechnet sind. Es wird quasi ein fertiges HTML eingesetzt, ohne das im JavaScript daran noch was verändert wird.
    Das klappte recht gut und flott. Anschließend habe ich div. Plugins für die Tabellenfunktionen ausprobiert (sortieren, etc.). Auch hier wurde ich fündig. Da fing es aber schon an kompliziert zu werden, denn nun konnte ich nicht mehr einfach fertiges HTML laden, sondern musste umstellen auf JSON. Je mehr Funktionalität ich damit implementierte desto mehr musst ich in JavaScript coden. Eigentlich beschäftigte ich mich am Ende nur noch damit wie das Plugin zu überlisten ist, damit es bestimmte Formatierungen anzeigen kann. Als ich nun dynmaische Updates hinzufügen wollte war ich dann erstmal am Ende. Ich wollte das neue Datensätze in die bestehende Tabelle auf dem Client hinzugefügt werden und zwar mit einem "nachglühenden" optischen Effekt, damit der User ohne bedienen/reloaden der Tabelle erkennt das was neues hinzukam. Natürlich müssen sich die neuen Datensätze an die eingestellten Filterregeln orientieren. Gleiches gilt für Updates bestehender/angezeigter Datensätze (z.b. Statusänderungen). Zudem wollte ich das relative Zeitangaben auch "mitlaufen", sprich ein "Seit 3 Minuten" nach einer Minute zu einem "Seit 4 Minuten" wird. Das versuchte ich dann separat in JavaScript mit einer setIntervall-Funktion zu realisieren.

    Ich bin jetzt nicht mehr sicher wo ich was am besten machen sollte und ob das mit den partiellen Updates so eine gute Idee ist, oder ob man nicht besser immer den kompletten Tabelleninhalt reloaded...
    Wo sollte man die Daten am besten aufbereiten? Alles in der PHP-Funktion vom Controller der API oder doch die Daten nativ senden und im Browser in JavaScript? Momentan scheint mir das am sinnvollsten. Bedeutet aber das ich sämtliche in PHP entwickelte Funktionen nach JavaScript portieren muss. Bin mir auch nicht mehr sicher ob ich wirklich solch komplexe Plugins nutzen will, oder die Sortierung nicht nativ in JS programmiere.

    Vielleicht kann mir jemand mit ähnlicher Aufgabenstellung einen Tipp aus der Praxis geben


  • #2
    Sowas klingt für mich nach einem klassichen Fall für Angular oder vergleichbare Frontend-Technologien. PHP stellt dann nur mehr eine API bereit um die Daten zu liefern. Wenn man dann noch fertige UI-Komponenten wie z.B. PrimeNG verwendet, spart das nochmal einiges an Arbeit.

    Kommentar

    Lädt...
    X