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


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
PrimFX

Salut tout le monde ! Je m'appelle Boris, j'ai 18 ans et je suis passionné d'informatique et de technologie. Je partage cette passion à travers mes vidéos que tu peux retrouver sur YouTube sous le nom de PrimFX ou bien sur ce site bien sûr (tutoriels de programmation (HTML, CSS, PHP), gameplays, vlogs high-tech...). @+

A voir aussi

4 Commentaires

POSTER UN COMMENTAIRE

Vous devez être connecté pour pouvoir poster un commentaire...

Pas encore de compte ? Créez-en un ici !



  • Photo de profil de louis

    louis

    12 July 2015 à 23:41

    bonsoir merci pour tout ce que tu fais pour nous.

  • Photo de profil de WhiiTe

    WhiiTe

    22 July 2015 à 20:46

    Merci du tuto 😄



    Par contre chez moi ça bug un peu ^^

  • Photo de profil de DevInput

    DevInput

    16 September 2017 à 21:54

    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

  • Photo de profil de Codeur-vigilant

    Codeur-vigilant

    24 December 2018 à 11:51

    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.