Table mit verschiedenen Datensätzen

  • Hallo Community,


    derzeit versuche ich mir eine kleine HTML-Tabelle aufzubauen (Grundstruktur siehe Bild), die Ihre Daten aus einer seperaten Datei bezieht.


    pasted-from-clipboard.png


    Die Tabelle soll mehrere Datensätze beinhalten, aber immer nur einen anzeigen und durch ein kleines Navigationsmenü am unteren Rand den nächsten oder vorherigen Datensatz anzeigen.


    Aktuell versuche ich es mit Angularjs die Daten einzuspielen, aber ich weiß garnicht ob mein Ansatz überhaupt sinnvoll ist und auch dahingehend erweitert werden kann um die Daten zu separieren.

    https://jsfiddle.net/9czrqLny/33/


    Hätte jemand ein paar Schlagwörtern nach denen ich mal suchen kann oder Beispiele?


    Gruß Nighty

  • Kennst du data.tables. Damit sollte man das hin bekommen. https://datatables.net/


    oder halt selber bauen.

    Wo kommen die Daten den her ? Aus der Datenbank ?

    Dann sollte das eigentlich auch kein Problem sein das man beim Blättern immer eine neue Tabelle ( oder Datensatz )anzeigen läßt.


    Edit habe gerade gelesen das die Daten aus einer anderen Datei kommt. Aber das könnte man ja so ähnlich machen.

    Je nach dem wie groß die Datei ist ,kann man sie erstmal einlesen und in array Speichern oder so und dann mit der Blätterfunktion aufteilen

  • Hallo Basti,


    danke für deine Antwort.

    Macht es an der Stelle überhaupt sinn so etwas in eine Tabelle zu packen?

    Aktuell habe ich es stumpf alles mit HTML gelöst, ist natürlich unübersichtlich und recht viel Schreibarbeit.


    Mein Gedanke war es die Daten bequem in einer Datei zu hinterlegen und die Tabelle greift dann darauf zu und stellt diese grafisch dar.

    Aber vielleicht gibt es ja sinnvollere Wege um dies zu realisieren.

  • Zitat

    Macht es an der Stelle überhaupt sinn so etwas in eine Tabelle zu packen?

    Die Frage ist berechtigt und es gibt gute Gründe, sie mit nein zu beantworten, denn eigentlich sind nur die beiden Strukturen mit M1, M2, ... sowie O1, O2, ... im semantischen Sinn jede für sich eine Tabelle.


    Zitat

    Mein Gedanke war es die Daten bequem in einer Datei zu hinterlegen und die Tabelle greift dann darauf zu und stellt diese grafisch dar.

    Das ist sicher eine gute Idee, vor allem wenn sich die Daten häufig ändern. Dann brauchst Du nicht jedes Mal das ganze HTML umzuschreiben, sondern nur diese Datei zu ändern. Für das Format sehe ich zwei Möglichkeien:

    • CSV - einfach, aber wenig geeignet, um komplexere Strukturen abzubilden
    • JSON - kann beliebige Strukturen abbilden, aber die Syntax kann ungeübte Benutzer vor Probleme stellen

    Die Datei kannst Du dann mit Ajax einlesen.

  • Hallo Sempervivum,


    JSON habe ich mir mal angeschaut und es sieht sehr viel versprechend aus!

    Das bedeutet, ich pack alle Datensätze in die JSON Datei, binde diese in meinen HTML Code ein und kann dann mit einem AJAX Script alle Datensätze einlesen.


    Ist es dann noch möglich den mit AJAX importieren Datensatz zu formatieren? Habe von AJAX keine Ahnung.

    Wenn ja, ist es mit AJAX auch möglich mir nur einen Datensatz anzeigen zu lassen und mit einem "next" u. "previous" Button zwischen allen vorhandenen Datensätzen durchzuklicken?


    Gruß Nighty

  • Zitat

    binde diese in meinen HTML Code ein und kann dann mit einem AJAX Script alle Datensätze einlesen.

    In den HTML-Code brauchst Du sie nicht einzubinden, sondern in einer getrennte Datei ablegen. Wenn Du dich auch über Ajax informierst, wirst Du sehen, dass Du damit eine Datei auf dem Server, u. a. auch im JSON-Format, einlesen kannst.

    Zitat

    Ist es dann noch möglich den mit AJAX importieren Datensatz zu formatieren?

    Nein, das leistet Ajax nicht. Du bekommst eine JS-Struktur mit Arrays bzw. Objekten und musst diese in ein Struktur im DOM umwandeln. Das Formatieren geschieht dann mit CSS.

    Zitat

    ist es mit AJAX auch möglich mir nur einen Datensatz anzeigen zu lassen und mit einem "next" u. "previous" Button zwischen allen vorhandenen Datensätzen durchzuklicken?

    Leider nein, auch dieses geht über das hinaus, was Du mit Ajax machen kannst. Solch eine Funktion musst Du mit Javascript realisieren.

  • Hallo Sempervivum,


    konnte es mit einem Angluarjs Script umsetzen und es funktioniert recht gut!

    Allerdings muss ich gestehen das ich es noch nicht 100% verstehe.




    Der Vorteil ist, dass ich es bequem im HTML Code formatieren kann und durch die Schleife alle neuen Daten automatisch erfasst werden.


    Danke für euere Hilfe und Denkanstöße.

  • Mit Angular habe ich mich bisher auch nicht beschäftigt. Wo verbirgt sich denn da das HTML für die Struktur aus deinem Eingangsposting, mit Title, Subtitle, den beiden Tabellen etc.?

    Es ging mir erstmal darum das es funktioniert, macht ja wenig Sinn alle Inhalte in die Struktur einzubauen wenn man noch nicht wirklich weiß ob es überhaupt so funktioniert wie man es haben will.

    Durch die Variablen {{current.buildname}} bin ich sehr flexibel was die Positionierung im HTML-Code angeht.