MySQL-Datensätze beim scrollen nachladen.

Vor einiger Zeit habe ich den Tipp “MySQL, AJAX – weitere Datensätze beim scrollen nachladen” schon einmal veröffentlicht.
Seit einiger Zeit bekomme ich nun Hinweise dass der Tipp unter einigen Browsern nicht mehr funktionieren würde. Das nehme ich nun zum Anlass um eine neue Version zu veröffentlichen, die unter allen Browsern gleichermaßen funktionieren sollte. Getestet habe ich das ganze mit Google Chrome, Firefox, Safari und den Internet Explorer.

Wie das Ganze aussehen könnte, sehen Sie hier.

Mit Ajax kann man schon tolle Sachen machen. So ist es z.B. möglich, weitere Datensätze aus einer MySQL-Datenbank, automatisch nachzuladen wenn man die Seite nach unten scrollt ohne dass dabei die Seite selbst neu geladen werden muss. Auf der Google+ Seite sieht man ganz schön was gemeint ist. Man scrollt nach unten und neue Beiträge werden automatisch nachgeladen.

Ich habe für diesen Tipp eine Datenbank mit den Vor- und Nachnamen von fiktiven Kunden angelegt. Beim ersten Aufruf der Seite, werden die ersten 20 Kunden geladen. Wenn man die Seite nun nach unten scrollt werden, jedes Mal, wenn man am Ende der Seite angekommen ist, 5 neue Datensätze nachgeladen. Das kann man so oft wiederholen, bis alle Datensätze aus der Datenbank geladen wurden. In der Datei “assets/scroll/loaddata.php” kann man die Anzahl der zu ladenden Datensätze an seine Bedürfnisse anpassen, indem man den Wert der Variablen $lim (Limit) in Zeile 9 und in Zeile 14 ändert.

 

MySQL-Datenbank

Dies ist der Aufbau der MySQL-Datenbank.
Wenn Sie eine eigenen Datenbanktabelle benutzen wollen, passen Sie bitte in der Datei “assets/scroll/loaddata.php” die entsprechende Datenbankabfrage an. Ich habe die Datenbanktabelle in diesem Beispiel “Kunden” genannt.

id = bigint(11) AutoIncrement
Vorname = varchar(50)
Nachname = varchar(50)

 

index.php

<!DOCTYPE html>
<html lang="de">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta charset="utf-8">
  <meta name="author" content="Enrico Sadlowski">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="robots" content="index,follow">
  <title>Datensätze beim scrollen nachladen</title>
  <link rel="stylesheet" href="styles/default.css" type="text/css" />
  <script type="text/javascript" src="assets/scroll/jquery-1.2.6.pack.js"></script>

  <script type="text/javascript">
  $(document).ready(function()
  {		
    function loadNextData() 
    {
      var userID=$(".block:last").attr("id");
      $('div#loader').html('<img src="images/loader.gif">');
      $.post("assets/scroll/loaddata.php?lid="+userID,

      function(data)
      {
        if (data != "") 
        {
          $(".block:last").after(data);			
        }
        $('div#loader').empty();
      });
    };

    $(window).scroll(function()
    {
      if($(window).scrollTop() == $(document).height() - $(window).height())
      {
        loadNextData();
      }
    });	
  });
  </script>
</head>
<body>

<div id="wrapper">
  <?php include('assets/scroll/loaddata.php'); ?>
  <div id="loader"></div>
</div>

</body>
</html>

 

assets/scroll/loaddata.php

Diese Datei wird durch die Datei “index.php” beim ersten Start der Seite und jedes mal, wenn Sie die Seite ganz nach unten scrollen, aufgerufen und sorgt dafür dass Datensätze aus der Datenbank geladen werden. Beim ersten Start der Seite werden die ersten X Datensätze geladen. Jeder Datensatz wird in ein div-Layer mit der CSS-Klasse block geladen, wobei jedem der Div-Layer die ID des darin enthaltenen Datensatzes zugewiesen wird. Wenn die Seite nun ganz nach unten gescrollt wird, wird die ID des letzten Div-Layers, was also der ID des letzten aus der Datenbank ausgelesenen Datensatzes entspricht, ermittelt und an die Datei “loaddata.php” in der Variablen $lid übergeben. Die Datei loaddata.php lädt nun die nächsten X Datensätze aus der Datenbank, deren id größer dem Wert in der Variablen $lid ist.

<?php
include("db.inc.php");

if(isset($_GET['lid']))	
{
  $lid = $_GET['lid']; 
  $lim = 5; //Anzuzeigende Datensätze beim scrollen
}
else
{
  $lid = 0;
  $lim = 20;//Anzuzeigende Datensätze beim Start
}

if($lid==0) $abfrage = ""; else	$abfrage = " WHERE id > ".$lid;

$q_data = mysql_query("SELECT id, CONCAT(Vorname,' ',Nachname) AS username 
                       FROM Kunden ".$abfrage." ORDER BY id ASC LIMIT ".$lim);
while($r_data = mysql_fetch_array($q_data))
{
  $userid = $r_data['id'];
  if($r_data['username']!=' ') $username = $r_data['username']; else $username = 'unbekannt';
?>

<div id="<?php echo $userid; ?>" class="block" ><?php echo "<b>".$userid."</b> ".$username; ?></div>

<?php
}
?>

 

assets/scroll/db.inc.php

In dieser Datei befinden sich die Zugangsdaten zu Ihrer MySQL-Datenbank. Außerdem regelt diese Datei die verbindung zur Datenbank. Passen Sie die Werte für DB_SERVER, DB_NAME, DB_USER und DB_PASSWORD bitte an Ihre Gegebenheiten an damit der Zugriff auf Ihre Datenbank erfolgen kann!

<?php
if (__FILE__ == $_SERVER['SCRIPT_FILENAME']) exit('No direct access allowed.');

define('DB_SERVER',"localhost");
define('DB_NAME',"Datenbankname");
define('DB_USER',"Username");
define('DB_PASSWORD',"Datenbankpasswort");

$conn = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD);
if(is_resource($conn))
{
  mysql_select_db(DB_NAME, $conn);
  mysql_query("SET NAMES 'utf8'", $conn);
  mysql_query("SET CHARACTER SET 'utf8'", $conn);
}
?>

 

styles/default.css

In dieser Datei befinden sich die Style-Informationen der Seite.

body 
{ 
  font-size : 12pt; 
  font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
  padding : 0 0 10px 0; 
} 

.block
{
  height:60px;
  width:auto; 
  border-bottom:1px solid silver; 
  padding:5px;
  font-weight: bold;
  font-size: 20pt;
}

#loader
{
  text-align: center;
  height:60px;
  width: auto;
  padding:20px;
  background: white;
}

#wrapper
{
  margin:100px auto 100px auto;
  width:700px;
  min-height:500px;
  padding:0px;
  border: 10px solid silver;
  box-shadow: 7px 7px 8px #818181;
}

 

Bitte beachten Sie, dass Sie auf jeden Fall eine Datenbanktabelle mit genügend Einträgen anlegen und dass Sie in der Datei “assets/db.inc.php” die Zugangsdaten zu Ihrer Datenbank anpassen.

  • Das komplette Projekt können Sie hier herunterladen.
  • Eine SQL-Datei zum Import einiger Datensätze in die MySQL-Datenbank finden Sie hier.

Über profwebapps

Programmierer, Webdesigner, Grafiker, Mac-User, Blogger, Screencaster. profwebapps ist auch bei Google+ vertreten

4 Kommentare zu “MySQL-Datensätze beim scrollen nachladen.

  1. Pingback: MySQL, AJAX - weitere Datensätze beim scrollen nachladen

  2. Hi, danke für das super Script. Habe es nun nach meinen Bedürfnissen umgebaut und es läuft zu 90%. Zwei Sachen hätte ich jedoch noch, vielleicht kann mir da jemand helfen?

    a) Ich muss neben der id eine weitere Variable übergeben. Kann ich das in der JavaScript Funktion und wenn ja wie?

    b) Ich lasse mit deinem Script Bilder aus einer Datenbank anzeigen. Diese sollen eigentlich via Lightbox vergrößert dargestellt werden. Ist das mit dem Script noch möglich?

    Danke
    Lieben Gruß
    Andy

  3. Möglich ist alles.
    Was für eine zweite Variable willst du denn übergeben und woher kommt die?

    Lightbox kann man auch hier wie gewohnt einbauen.

  4. Ich zähle die Position an der das Bild steht, weil diese das verwendete css Atribut bestimmt. Die Variable heißt $position.

    Ok, dann muss ich mit der Lightbox wohl noch rumprobieren. Aktuell funktioniert es nicht.

    Lg
    Andy

Kommentar verfassen