Sujet Précédent Sujet Suivant

Infinite scroll

Fermé
IIwayII Messages postés 28 Date d'inscription vendredi 12 mars 2021 Statut Membre Dernière intervention 23 juin 2021 - 6 avril 2021 à 18:47
Bonjour,

J'ai regardé il y a quelques jour la vidéo de PrimFx : https://www.youtube.com/watch?v=2Di1IPuSMtk&ucbcb=1
qui montre comment créer un inifnite scroll (quand on arrive en bas de la page, de nouvelles informations se charge comme Instagram, Facebook, etc... évitant la pagination) à partir des ressources proposées par https://infiniteajaxscroll.com/
Aujourd'hui ce site a beaucoup changé par rapport au moment où il a fait la vidéo (2015), et ainsi je n'ai pas réussi à faire son tuto qui est pourtant très bien expliqué. Les autres tutos trouvés sur internet pour faire un infinite scroll étaient assez difficile à comprendre j'ai trouvé, je ne suis pas très doué en javascript, ajax, jquery, etc...

Alors, auriez vous un lien à me passer proposant de faire cette infinite scroll de façon aussi simple qu'il l'a fait quand il a créé ce tuto, ou une autre technique simple pour faire le même genre de chose (par exemple, un bouton "voir plus" serait bien aussi) ou m'expliquer ce que j'ai foiré : j'ai essayé de le faire avec les nouvelles ressources de https://infiniteajaxscroll.com/ mais ça n'a pas marché... 

<?php 
    session_start();
    $_SESSION['page'] = "Index.php";
    include("connexion.php");
    $postsParPage = 10;
    $postsTotalesReq = $bdd->query('SELECT id FROM posts');
    $postsTotales = $postsTotalesReq->rowCount();
    $pagesTotales = ceil($postsTotales/$postsParPage);
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)*$postsParPage;



?>
<!DOCTYPE html>
<html>
<head> 
	<title>Index</title>
	<?php include("head.php"); ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
	<!--
	-->
		
        <?php 
		if(isset($_SESSION['id']))
		{
			
            $idmembre = $_SESSION['id'];
            $req = $bdd->prepare('SELECT id, pseudo FROM membres WHERE id = :id ');
            $req->execute(array('id' => $idmembre));
            $resultat = $req->fetch();?>
			<section id="section" class="section">
            <div class="container">
            <?php
		$req_posts = $bdd->query('SELECT id, titre, contenu, auteur FROM posts ORDER BY id DESC LIMIT '.$depart.', '.$postsParPage.'');

		
	while ($donnees = $req_posts->fetch())
	{
        echo'<div class="item">';
        ?><?php
		echo '<br /><div id="titre_post"><span>'.$donnees['auteur'].'</span></div><div id="legende_post"><h3>'.$donnees['titre'].'</h3><span>'.$donnees['contenu'].'</span><br /><br /></div>';
       echo '</div>';
		

	}
	$req->closeCursor();
    
    echo '<div class="pagination">';
    for($i=1;$i<=$pagesTotales;$i++)
    {
        if($i == $pagecourante)
        {
            echo $i.' ';
        } elseif ($i == $pagecourante+1)
        {
            echo '<a href="index.php?page='.$i.'" class="next">'.$i.'</a> ';
        }
        else {
            echo '<a href="index.php?page='.$i.'">'.$i.'</a> ';
    }
	
	}
    echo '</div>';
    echo '<br /><br /><br /></div>';

}

?>

<?php include("footer.php"); ?>

<script src="https://unpkg.com/@webcreate/infinite-ajax-scroll/dist/infinite-ajax-scroll.min.js"></script>
<script>
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';

let ias = new InfiniteAjaxScroll('.container', {
  item: '.item',
  next: '.next',
  pagination: '.pagination'

});
</script>
</section>
</body>
</html>



J'espère que vous pourrez m'aider...