JavaScript Nachladen einer Tabelle im jQuery AJAX

Domi83 · 27. Juli 2017

Hallo Leute, ich habe da mal eine eher JavaScript / jQuery basierende Frage... Es geht um folgendes Schema, ich habe mir eine Test-Ausgabeseite gebaut, die wie folgt aussieht.

HTML:

<body>
 <input id="datefrom" class="datum" name="datefrom" type="text">
 <input id="dateto" class="datum" name="dateto" type="text">
 <input id="senden" name="senden" type="button" value="absenden">
 <div id="div1"></div>
</body>

Sobald diese Seite vollständig geladen ist, wird mein jQuery AJAX ausgeführt,

Code:

$(document).ready(function(){
 $.ajax({url: "ajax.contentlist.php", success: function(result){
  $("#div1").html(result);
 }});
});

Das funktioniert auch alles, ohne Probleme. Allerdings würde ich gerne das laden der Liste aufgrund der Performance etwas anpassen. Beim öffnen der Seite, sollen die ersten 200 - 300 (variable zahl) Datensätze geladen werden und wenn man runter scrollt, sollen die nächsten Datensätze geladen werden.

Kann ich das alles mit nur zwei Dateien bewerkstelligen, oder muss ich da noch eine dritte Datei mit einbeziehen welche die Liste erweitert (append)? Ich versuche das mal anhand der Dateien Schematisch zu skizzieren...
- index.html <-> ajax.contentlist.php (aktuelle Situation)
- index.html <-> ajax.contentlist.php <-> dritte Datei für Append (vermutlich muss es so sein?)

Ich hoffe mein Anliegen versteht man und ich konnte meinen Wunsch gut erklären.

Gruß, Domi

Drexel · 27. Juli 2017

Theoretisch könntest Du das auch alles in einer Datei machen, wenn die über Parameter korrekt gesteuert wird.

Domi83 · 27. Juli 2017

Also in eine einzelne Datei hab ich das noch nicht geschafft, mir würde es ausreichen wenn ich es in den zwei Dateien belassen könnte. Bräuchte allerdings mal den einen oder anderen Gedankenstoß wie man das bewerkstelligt, ohne groß mit Fachausdrücken herum zu werfen

Mein Gedanke war halt, dass wenn ich die ajax.contentlist.php direkt öffne, genau in dieser Datei meine Ausgabeliste auftaucht mit einem Maximum von X Datensätzen (geladen aus einer MySQL Tabelle) und wenn man unten ist, werden dann die Datensätze von X bis Y angezeigt.

Diese Liste binde ich dann nur wieder via AJAX in meine index.html (oder index.php) Datei ein und fertig wäre de Spaß.

Nachtrag: Für eine unserer Portal Seiten habe ich so etwas sogar schon mal realisiert. Da wird dann allerdings die Tabelle schon in der index.php Datei erzeugt und in meiner über jQuery nachgeladenen ajax Datei dann die Tabellen-Zeilen geladen, bis aus der Datenbank nichts mehr kommt.

Yuuri · 27. Juli 2017

Domi83 schrieb:
Bräuchte allerdings mal den einen oder anderen Gedankenstoß wie man das bewerkstelligt, ohne groß mit Fachausdrücken herum zu werfen

Wurde bereits gesagt, über Parameter. Häng einfach an den Query dran, von wo aufgelistet werden soll und schon hast du das Problem umgangen. Wird kein Parameter geliefert, wird ab Index 0 aufgelistet.

Drexel · 27. Juli 2017

Kenne mich mit jQuery nicht so aus, aber die aufrufende aufzurufende URL könnte so aussehen:

ajax.contentlist.php?startline=21

Nehmen wir an, Du holst beim ersten mal 20 Datensätze ab, dann musst Du in der URL entsprechend dem Beispiel eine 21 einfügen, das nächste mal dann 41. Das ändern des Parameters erfolgt auch über jQuery bzw. Javascript, Du musst Dir nur merken wo Du gerade bist. Wie Yuuri schon sagte, wenn der Parameter nicht existiert oder 0 ist, gib die ersten 20 Datensätze aus.

Domi83 · 27. Juli 2017

Joa, die MySQL SELECT Abfrage mit "Limit 0, 10" wäre mir vertraut. Ob ob nun die Werte / Parameter via Post oder Get übergeben werden wäre ja ein anderes Thema, das funktioniert ja soweit schon. Ich bekomme ja beim ersten Öffnen der Seite eine Ausgabe, angefangen bei 1 - 100

Ich bin zumindest schon so weit, dass die Daten korrekt aufgebaut werden, 'append()' ist hier das Schlüsselwort gewesen. Ich hatte gepennt und immer noch 'html()' bei der Rückgabe gehabt. Dann kann auch nicht das passieren, was ich wollte. Jetzt wäre nur noch die Frage an die jQuery Spezies, kann ich bei dem 'append()' irgendwie den head meiner Tabelle weg lassen?

Denn so wie es jetzt ist, wird meine Tabelle komplett geladen, inkl. head etc. und ich brauche eigentlich nur noch die folgenden <tr>

Hoffe man versteht wie ich das meine.

Nachtrag: Ich hätte da vielleicht einen Ansatz... beim ersten mal laden der AJAX Funktion wird die komplette Tabelle geladen. Wenn ich ganz nach unten-scrolle, wird ein weiterer Parameter übergeben der dafür sorgt das von meiner ajax.contentlist.php nur noch <tr> zurück gegeben wird. Ist das passend, oder gibt es da noch sinnvollere Lösungen?

ayngush · 31. Juli 2017

Es gibt da Ansätze den "tbody" scrollbar zu machen und dann die Tabellenzeilen mittels lazy loading nachzuladen...

Aber ich warne immer wieder vor dem Einsatz einer solchen Technik. Schlechte Usability, schlechte Performance -> schlechtes UX-Design.
Und Serverseitig kann das eigentlich keine vernünftige "MVC"-Architektur sein.
Trenne deine Daten von deiner Sicht. Per AJAX HTML-Code auszutauschen ist ... naja, wofür gibt es JSON?
und gerade Tabellen dynamisch nachladen... Schau mal, was der Browser da im DOM alles rendern muss, um eine Tabelle ordentlich darzustellen.

Mach lieber eine Pagination, aus Gründen der Performance und der sauberen Trennung von Daten von Sichten komplett in Javascript, statt lazy loading, wenn dir deine Datentabellen zu groß sind.
Ach und... Datentabellen würde ich wo es geht vermeiden. Geht nicht immer, ist schon klar aber manchmal muss man nur mal darüber nachdenken, dann geht es doch.

Grüße

Domi83 · 4. August 2017

Moin moin, ich wollte mich die tage schon zu Worte melden, kam aber noch nicht dazu. Also die Tabelle selbst (den tbody) wollte ich nicht separat scrollbar machen, dann lieber die Seite selbst scrollbar machen und die Tabelle einfach beim herunter scrollen, verlängern / nachladen lasen. Man muss ja dann nur nicht bei der ersten Ausgabe ohne Limit arbeiten, 200 Datensätze und dann immer 200 Datensätze nachladen, dürfte ebenfalls ausreichend sein. Wobei man die Zahl individuell anpassen könnte...

Pagination finde ich persönlich doof, gerade bei der Variante der Ausgabe wie wir sie hier im System haben. Es gibt einen Header, Footer und den Content in der Mitte. Dieser ist geteilt in aside-left und der Content selbst, rechts daneben. Wobei der aside auch noch via "toggle" weg geklappt werden kann. Es erfüllt seinen Zweck und funktioniert sogar gut.

Wenn man dann einen Datensatz aus der Tabelle bearbeiten will, wird ein Modal drüber gelegt ohne das alles immer komplett neu geladen werden muss. Was mich jetzt aber mal interessiert ist folgender Satz "Datentabellen würde ich wo es geht vermeiden.", wir reden von dem klassischen html TABLE -> TBODY -> TR -> TD, korrekt? Wenn ich aufgrund der Performance darauf verzichten soll, was sollte man denn dann verwenden?

Gruß, Domi

Suche

JavaScript Nachladen einer Tabelle im jQuery AJAX

Domi83

Rear Admiral

Drexel

Lt. Commander

Domi83

Rear Admiral

Yuuri

Fleet Admiral

Drexel

Lt. Commander

Domi83

Rear Admiral

ayngush

Commander

Domi83

Rear Admiral

Ähnliche Themen