Nous avons vu comment créer un système de pagination dans le précédent tuto PHP... Voyons maintenant comment l'adapter afin d'en faire un Infinite Scroll !
Liens Utiles :
- TUTO PHP - Système de pagination
- Infinite Ajax Scroll
- Librairie jQuery Google
- Ajax Loader
- Code du fichier index.php:
<?php
$bdd = new PDO("mysql:host=127.0.0.1;dbname=primfx;charset=utf8", "root", "");
$videosParPage = 5;
$videosTotalesReq = $bdd->query('SELECT id FROM videos');
$videosTotales = $videosTotalesReq->rowCount();
$pagesTotales = ceil($videosTotales/$videosParPage);
if(isset($_GET['page']) AND !empty($_GET['page']) AND $_GET['page'] > 0 AND $_GET['page'] <= $pagesTotales) {
$_GET['page'] = intval($_GET['page']);
$pageCourante = $_GET['page'];
} else {
$pageCourante = 1;
}
$depart = ($pageCourante-1)*$videosParPage;
?>
<html>
<head>
<title>TUTO PHP</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="toutes-les-videos">
<?php
$videos = $bdd->query('SELECT * FROM videos ORDER BY id DESC LIMIT '.$depart.','.$videosParPage);
while($vid = $videos->fetch()) {
?>
<div class="video">
<b>N°<?php echo $vid['id']; ?> - <?php echo $vid['titre']; ?></b><br />
<i><?php echo $vid['description']; ?></i>
<br /><br />
</div>
<?php
}
?>
</div>
<div id="pagination">
<?php
for($i=1;$i<=$pagesTotales;$i++) {
if($i == $pageCourante) {
echo $i.' ';
} elseif ($i == $pageCourante+1) {
echo '<a href="index.php?page='.$i.'" class="suivant">'.$i.'</a> ';
} else {
echo '<a href="index.php?page='.$i.'">'.$i.'</a> ';
}
}
?>
</div>
<script src="js/jquery-ias.min.js"></script>
<script>
var ias = jQuery.ias({
container: '#toutes-les-videos',
item: '.video',
pagination: '#pagination',
next: '.suivant'
});
ias.extension(new IASSpinnerExtension({
src: 'images/loader.gif'
}));
ias.extension(new IASNoneLeftExtension({
text: 'Plus aucune vidéo à charger...'
}));
ias.extension(new IASTriggerExtension({
text: 'Afficher plus de vidéos',
offset: 5
}));
</script>
</body>
</html>
Votre commentaire