10 weitere datensätze laden

Webdesign & Technik HTML & CSS
1

Hallo zusammen,

ich lade aus einer DB 10 Datensätze. Und ganz unten steht ein Link: “10 weitere laden”.
Wenn man darauf klickt, werden die nächsten 10 Datensätze aus der DB geladen und wieder soll unten ein Link stehen mit “10 weitere laden” - usw bis alle geladen wurden. Dann soll kein Link mehr erscheinen.

Wie kann ich so etwas realisieren oder gibt es sowas schon fertig?

Besten Dank im Voraus

2

Grundsätzlich ist sowas wie “Blätterfunktion” dein Suchstichwort.

Wenn das auf einer Seite stattfinden soll, die also immer um x weitere Datensätze ergänzt werden soll, ist AJAX dein Stichwort. Das Prinzip bleibt das gleiche, nur statt eine neue Seite zu laden, lädst du weitere Datensätze im Hintergrund nach, und setzt sie dann in die aktuelle Seite ein.

3

Hi technikfreak

als anmerkung: würde das thema in das Forum für PHP und MySQL verschieben.

am einfachsten ist es wohl sowas selbst umzusetzten, da es nicht enorm kompliziert ist.

Es gibt grundsätzlich 2 Möglichkeiten sowas zu machen. (zumindest was die Bedienung angeht):

  • neue Datensätze durch einen erneuten Seitenaufruf laden
  • neue Datensätze per AJAX in die aufgebaute Seite laden

Das zweite ist etwas komplexer, jedoch sehr ähnlich auf der Serverseite umsetzbar. Es kommen lediglich noch einige Zeilen JavaScript hinzu. (Wobei es enorm viel komfortabler wird zum programmieren wenn du ein JavaScript Framework wie script.aculo.us / prototype verwendest)

ich zeig dir mal ein (eigenes) Beispiel für die erste Variante.
Grundsätzlich gibt es eine Datenbankabfrage die wie folgt aussehen könnte:

$sql = "SELECT * FROM `tabelle` LIMIT 0,10";

Dieser Befehl holt dir jetzt vom ersten Eintrag aus der Tabelle 10 Stück. Diese kannst du ohne Probleme ausgeben und dann am Ende noch einen Link hinzufügen:

/*SQL Abfrage*/
/*Tabelle erzeugen*/
echo '<a href="?anzahl=20">10 weitere laden</a>';

beim klick auf den Link wird die selbe Seite nochmals aufgerufen. Diesmal ist aber in der Variable $_GET[‚anzahl‘] die Zahl 20 gespeichert was dir anzeigen soll, dass jetzt 20 Einträge eingelesen werden sollen.
Wenn du das jetzt für alle Fälle machen willst kann es etwa so aussehen:

is_numeric($_GET['anzahl']) ? $anzahl= $_GET['anzahl'] : $anzahl = 10;
$sql = "SELECT * FROM `tabelle` LIMIT 0," .$anzahl;
$ausgabe = '';

$result = mysql_query($sql);
if(!$result){
die("Datenbankfehler - " .mysql_error());
} else{
for($i=0;$i<mysql_num_rows($result);$i++){
$ergebnis[$i] = mysql_fetch_array($result);
}
echo '<table>';
$ausgabe .= '<tr><th>Vorname</th><th>Nachname</th></tr>;
for($i=0;$i<count($ergebnis);$i++){
$ausgabe .= '<tr><td>' .$ergebnis[$i]['Vorname']. '</td><td>' .$ergebnis[$i]['Nachname']. '</td></tr>';
}
echo '</table>';
if($anzahl == mysql_num_rows($result)){
echo '<a href="?anzahl=' .($anzahl + 10). '">Weitere Einträge laden</a>';
}
}

Das ganze kann man noch erweitern und z.B. genau ausrechnen wie viele Einträge am Schluss noch geladen werden müssen. (sind ja nicht immer 10 übrig, stört jedoch nicht bei der Abfrage wenn die Zahl zu hoch ist.)
Weiter muss die Abfrage und die Ausgabe auf dein Verwendungszweck angepasst werden und Fromatierungen fehlen natürlich…

mfG
dola

4

das mit php würde ich auch noch hinbekommen, nur eigentlich hatte ich vor das mit ajax zu realisieren. script.aculo.us sagt mir was, hab mich aber noch nicht näher damit beschäftigt…

5

ok

mit AJAX kann das wie folgt gmeacht werden. script.aculo.us ist dazu nicht einmal nötig. prototype (was für script.aculo.us sowieso benötigt würde) allein reicht schon.
unter folgendem Link findet sich ein gute Erklärung der passenden Methode:
prototypejs.org/learn/introduction-to-ajax

Prototype lässt sich hier herunterladen:
prototypejs.org/download

Grundsätzlich baust du den ganz normalen PHP-Code (wie aus meinem Beispiel) in eine externe Datei ein. Per echo Befehl gibst du dann die ganze Tabelle aus.
Auf Client-Seite (also in der Datei wo die Ergebnisse erscheinen sollen) muss etwas in folgendem Stil in JavaScript stehen:

/*JavaScript*/
function weiterladen(anzahl){
new Ajax.Request('/requester.php?anzahl='+anzahl,
  {
    method:'post',
    onSuccess: function(transport){
      var response = transport.responseText || "Fehler beim neuladen.";
      $('ergebnisse').innerHTML = trasport.responseText;
    },
    onFailure: function(){ alert('Unbekannter Fehler.') }
  });
}

Die Funktion weiterladen() kannst du jetzt über das onClick-Event in den Link einbinden, der unten jeweils steht um neue Datensätze zu laden. Als Parameter wird die Anzahl anzuzeigender Einträge mitgegeben.

im Teil onSuccess wird erreicht, dass das Feld (am besten ein div) mit der ID ‚ergebnisse‘ den gesamten Inhalt der vom Server kommt erhält. Das heisst wenn direkt HTML kommt vom Server, dann sollte das einwandfrei funktionieren.

Jetzt musst du einfach noch dafür sorgen, dass am Anfang bereits die ersten Einträge dastehen. Dies entweder indem du im onload-Eventhandler die Funktion weiterladen() bereits aufrufst oder indem du direkt beim Aufbau der Seite die ersten Einträge per PHP reinschreibst.

hoffe hilft dir…

mfG
dola