Dans ce tutoriel, je vais vous montrer comment charger dynamiquement des données sur le défilement div en utilisant php, mysql, jquery et ajax ou vous pouvez dire que facebook aime la pagination, chaque fois que l'utilisateur sera en bas de la div ou de la page, de nouvelles données seront chargé instantanément.
Dans cet exemple, j'ai une base de données de pays et j'ai besoin d'afficher toute la liste des pays à l'intérieur de la div, donc chaque fois que l'utilisateur fait défiler la div du pays, la liste suivante des pays sera chargée.
Tout d'abord, créez une base de données de pays.
CREATE TABLE IF NOT EXISTS `countries` ( `id` int(11) NOT NULL AUTO_INCREMENT, `sortname` varchar(3) NOT NULL, `name` varchar(150) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=247 ; |
Créer un fichier php pour établir une connexion avec la base de données et récupérer la liste des pays selon la limite.
<?php
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "location";
$limitStart = $_POST['limitStart'];
$limitCount = 50; // Set how much data you have to fetch on each request
if(isset($limitStart ) || !empty($limitStart)) {
$con = mysqli_connect($hostname, $username, $password, $dbname);
$query = "SELECT id, name FROM countries ORDER BY name limit $limitStart, $limitCount";
$result = mysqli_query($con, $query);
$res = array();
while($resultSet = mysqli_fetch_assoc($result)) {
$res[$resultSet['id']] = $resultSet['name'];
}
echo json_encode($res);
}
?> |
Créez maintenant un fichier html et mettez du css et du html
<style>
.country { height: 300px; overflow: auto; width: 500px; }
.loading { color: red; }
li {font-size:24px;}
#loading { display:none; color:red; font-size:30px; }
</style>
<div class="country">
<ul id="results"></ul>
</div>
<span id="loading">Loading Please wait...</span> |
Après cela, écrivez jquery pour envoyer la requête au serveur lors du défilement div
<script>
$(function() {
loadResults(0);
$('.country').scroll(function() {
if($("#loading").css('display') == 'none') {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
var limitStart = $("#results li").length;
loadResults(limitStart);
}
}
});
function loadResults(limitStart) {
$("#loading").show();
$.ajax({
url: "request.php",
type: "post",
dataType: "json",
data: {
limitStart: limitStart
},
success: function(data) {
$.each(data, function(index, value) {
$("#results").append("<li id='"+index+"'>"+value+"</li>");
});
$("#loading").hide();
}
});
};
});
</script> |
Maintenant, votre fichier index.html final sera
index.html
<style>
.country { height: 300px; overflow: auto; width: 500px; }
.loading { color: red; }
li {font-size:24px;}
#loading { display:none; color:red; font-size:30px; }
</style>
<div class="country">
<ul id="results"></ul>
</div>
<span id="loading">Loading Please wait...</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
loadResults(0);
$('.country').scroll(function() {
if($("#loading").css('display') == 'none') {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
var limitStart = $("#results li").length;
loadResults(limitStart);
}
}
});
function loadResults(limitStart) {
$("#loading").show();
$.ajax({
url: "request.php",
type: "post",
dataType: "json",
data: {
limitStart: limitStart
},
success: function(data) {
$.each(data, function(index, value) {
$("#results").append("<li id='"+index+"'>"+value+"</li>");
});
$("#loading").hide();
}
});
};
});
</script> |
Voir la démo en direct et télécharger le code source.
| DÉMO | TÉLÉCHARGER |
