Table mit verschiedenen Datensätzen

Nightythehawk · 31. August 2018

Hallo Community,

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

html-seminar.de/woltlab/attachment/1664/

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

basti1012 · 31. August 2018

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

Nightythehawk · 31. August 2018

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.

Sempervivum · 31. August 2018

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.

Nightythehawk · 2. September 2018

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

Sempervivum · 2. September 2018

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.

Nightythehawk · 3. September 2018

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.

Code: script.js

angular.module("myApp", []).
controller("MyCtrl", function($scope) {
    $scope.dataSet = [
        {index:0,
        buildname:"das ist ein test",

        },
        {index:1,
        buildname:"daslllllll ist ein test",

        },
      
        {index:2,
        buildname:"das istjjjj ein test",

        
        },
         {index:3,
        buildname:"das istjjjj ein test",

        
        },
         {index:4,
        buildname:"das istjjjj ein test",

        
        }
    ],
    $scope.current = $scope.dataSet[0],
    $scope.next = function(){
        var i = $scope.getIndex($scope.current.index, 1);
        $scope.current = $scope.dataSet[i];
    },
    $scope.previous = function(){
        var i = $scope.getIndex($scope.current.index, -1);
        $scope.current = $scope.dataSet[i];
    },
    $scope.getIndex = function(currentIndex, shift){
        var len = $scope.dataSet.length;
        return (((currentIndex + shift) + len) % len)
    }
});

Alles anzeigen

Code

<section ng-controller="MyCtrl">

    <table align="center">
    <tr>
    <td></td>
    <td><button ng-click="previous()">previous</button></td>
    <td><button ng-click="next()">next</button></td>
    </tr>
    <th colspan="4"><h3>{{current.buildname}}</h3></th>
    <tr>
    <td colspan="4" align="center">Picture/Video</td>
    </tr>
    </table>
</section>

Alles anzeigen

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.

Sempervivum · 3. September 2018

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.?

Nightythehawk · 4. September 2018

Zitat von Sempervivum

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.

Arne Drews · 4. September 2018

Also ich persönlich finde Angular, als auch andere für die Anforderung aus #1 zu überladen:

Zitat von Nightythehawk

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.

Maske als HTML-Layout aufbauen und Daten laden sowie Paging per XMLHttpRequest realisieren.

Nightythehawk · 4. September 2018

das mag sein Arne, aber ich bin froh das es irgendwie klappt

Table mit verschiedenen Datensätzen

Jetzt mitmachen!

Teilen

Tags