Charger les données en défilant la page vers le bas avec jQuery et PHP

Voici un script qui vous permet de charger les données contenu dans une table au fur et à mesure que vous faites défiler la page vers le bas.

Ce système est idéal pour le chargement d’une liste d’articles ou de commentaires et de les afficher peu à peu au lieu de tout changer en une seule fois ce qui vous permet d’économiser des ressources serveur.

Charger les données en défilant la page vers le bas

Vous pouvez consulter la démonstration ici : Démo

Commençons par donner la liste des fichiers qu’on va utiliser, ici je suppose qu’on va afficher des commentaires :

  • config.php : Fichier de configuration pour la connexion à la base de données
  • load_data.php : Fichier qui va contenir la fonction chargeant les commentaires au fur et à mesure
  • index.php : Fichier qui va contenir la page affichant les commentaires et le système de défillement
  • style.css : Style de la page
  • loader.gif 

config.php

<?php
$connect = mysql_connect('localhost', 'root', '');
mysql_select_db('database_name', $connect);
?>

 load_data.php

<?php
function loadData($last_msg_id ='', $limit1 = 12, $limit2 = 5) {
	$limit = $limit1;
	$req = "SELECT * FROM message ";
	if ($last_msg_id != ""){
		$req .= " WHERE mes_id < '$last_msg_id' ";
		$limit = $limit2;
	}
	$req .= "ORDER BY mes_id DESC LIMIT $limit";
	$sql = mysql_query($req);
	$op = '';

	while($row=mysql_fetch_array($sql))
	{
		$msgID 	= $row['mes_id'];
		$msg 	= $row['msg'];

		$op .= '<div id="'. $msgID .'" class="message_list" ><span class="number">'. $msgID.'</span> '.$msg .'</div>';

	}	
	return $op;
}
?>

 index.php

<?php
require('config.php');
require('load_data.php');

$last_msg_id = $action = '';
if (isset($_GET['last_msg_id'])){ 	$last_msg_id = stripslashes($_GET['last_msg_id']); }
if (isset($_GET['action'])) 	{	$action 	 = stripslashes($_GET['action']); }

$limiteFirst  = 10;
$limiteSecond = 5;
if($action <> "get")
{
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Charger les données en défilant la page vers le bas avec jQuery et PHP</title>
<link rel="stylesheet" href="style.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

	(function(){

		function last_msg_function() 
		{ 

           var $last_id = $(".message_list:last").attr("id");
			$('div#last_loader').html('<img src="loader.gif">');
			$.post("index.php?action=get&last_msg_id="+ $last_id,

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

		$(window).load(function(){

			var docheight = $(document).height();
			var winheight = $(window).height();
			if ( docheight == winheight) 
			{
				last_msg_function();
			}

		});

		$(window).scroll(function(){
			if  ($(window).scrollTop() == $(document).height() - $(window).height()){
			   last_msg_function();
			}
		}); 

	})(jQuery);
</script>

</head>
<body>

<div id="content">
	<?php
	echo loadData($last_msg_id, $limiteFirst);
	?>

	<div id="last_loader"></div>
</div>
</body>
</html>

<?php
}
else
{
	echo loadData($last_msg_id, $limiteFirst, $limiteSecond);
}
?>

style.css

body
{
	font-family: Verdana;
	font-size:10px;
}
.message_list
{
	width: 600px; 
	margin: 0 auto;
	border: 1px dotted #0175ae; 
	padding:5px ;
	margin-bottom: 10px;
	text-align: justify; 

}
.message_list span {
	float: left; 
	background-color: #0175ae; 
	color: #ffffff; 
	padding: 5px;
	width: 20px;
	height: 20px;
	text-align: center;
	margin-right: 5px;
}
#last_loader {
	width: 600px; 
	margin: 0 auto;
	text-align: center;
	margin: -125px auto 0 auto;
}

Bien évidement ce script ne se concentre pas sur les problèmes de sécurité et se focalise sur le système de chargement des données tout en scrollant en bas.

Vous pouvez consulter la démonstration ici : Démo

Si vous avez des questions particulières n’hésitez pas à la poser dans les commentaires.