TUTO PHP - Créer un Infinite Scroll (ft. jQuery)

PrimFX Boris ('PrimFX') Le 12 juillet 2015

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 :
  <?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>

A propos de l'auteur

PrimFX
Boris ('PrimFX')

Je m'appelle Boris, j'ai 22 ans et je suis passionné d'informatique. Suite à mes études (Licence Informatique puis MSc Computer Science au Trinity College Dublin), je gère l'entreprise Single Quote co-fondée en 2019 et je profite de mon temps libre pour partager ma passion à travers des vidéos & articles 😃

Votre commentaire

Vous devez être connecté pour poster un commentaire. Se connecter ou Créer un compte

Commentaires 4

  • Codeur-vigilant Le 24 décembre, à 11:51 | Répondre

    Bonjour ou bonsoir Boris.
    Un grand remerciement à vous pour la qualité et la pertinence de vos tutoriels qui sortent vraiment du lot du fait qu'ils constituent pour tout néophyte une excellente assistance pour une mise en application concrète, chose que vous êtes à ma connaissance le seul à faire aussi efficacement en vidéos.
    Comme beaucoup d'autres ce tutoriel va m'être grandement utile pour ma page de galerie de posts mais j'aimerais pouvoir utiliser l'infinite scroll pour l'affichage de commentaires au bas de chaque page d'article sans système de pagination ou alors mettre en place un bouton "Load more" compatible avec la boucle PHP "while" (sachant que je dispose d'un système avec commentaires de réponses).
    Ayant consacré cinq bonnes heures à chercher vainement sur le web et à tester sans succès divers plugins je me tourne vers vous pour vous demander si vous pourriez, SVP, me donner une piste ou même réaliser un tutoriel spécialement consacré à cette tâche qui je pense serait un bon complément à ceux déjà en ligne.
    En attente de votre réponse et en qualité de visiteur assidu, je vous souhaite bonne continuation et d'égayantes fêtes de fin d'années.

  • DevInput Le 16 septembre, à 21:54 | Répondre

    Bonjour j'utilse ton systeme d'infinite scroll mais j'ai un probleme,
    en utilisant un syteme en ajax pour aimer le post,
    les post non charger de base, Jquery ne les dectetes pas
    Merci d'avance

  • WhiiTe Le 22 juillet, à 20:46 | Répondre

    Merci du tuto :D

    Par contre chez moi ça bug un peu ^^

  • louis Le 12 juillet, à 23:41 | Répondre

    bonsoir merci pour tout ce que tu fais pour nous.