Php scroll infinito ejemplo descargable

scroll infinito Php y JQuery

Necesitaremos las librerias javascript jquery.js y jquery.scrollExtend.js para poder realizarlo.

La maquetación de este ejemplo es la mínima para poder mostrar el resultado.
Al final de la página podrás descargarte el ejemplo que contiene también un archivo sql “baseDatos.sql”.
Archivo inicial index.php

<?php
session_start();
include ("includes/conexion.php");   /* archivo de conexion a la base de datos */
unset($_SESSION["cantidadcargadas"]); /* SI ACTUALIZAMOS DEBEMOS PONER LA CUENTA A 0 */
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
        <title>Scroll infinito de ejemplo con jQuery y PHP</title>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.scrollExtend.js"></script>
        <script type="text/javascript">
        $(document).ready(function()
        {
            $('#infinite_scroll').scrollExtend(   /* #infinite_scroll es el <div> envoltorio donde realizaremos el volcado*/
            {
                'target': '#lista',      /* Es el id del <ul> donde irán los resultados */
				'loadingIndicatorEnabled':true,
        		'loadingIndicatorClass':'scrollExtend-loading', /* El id de la imágen loanding.gif */
                'url': 'scroll.php',   /* El destino cuando el scroll llega al final de la página */
            });
        });
        </script>
       
     <style>
		li{
			list-style:none;
			margin:21px 0;
			border:3px solid #ddd;
			padding:21px;
			font-size:13px
			}
		.scrollExtend-loading {
			height: 32px;background-image:url('images/loading.gif');
			background-position: center center;background-repeat: no-repeat
			}
	 </style>

</head>
<body>
    <h1>Scroll infinito</h1>
    <div id="infinite_scroll">
        <ul id="lista">
           <?php
            $cnx = Conexion::getConnection();
			$sql ="SELECT id, first_name,film_info FROM actor_info  ORDER BY id LIMIT 0,10";  
			$res = $cnx->query($sql);
       			 while($row = $res->fetch(PDO::FETCH_ASSOC)) {					          
            ?>
                <li>
                    <strong><?php echo $row["id"] . "-" . $row["first_name"]; ?></strong><br>
                    <?php echo strip_tags($row["film_info"]); ?>
                </li>
            <?php
				}
            ?>
        </ul>
    </div>
</body>
</html>

El archivo scroll.php de destino cuando el scroll llega al final de la página.

<?php
session_start();
include ("includes/conexion.php");
$cnx = Conexion::getConnection();

   if (!isset($_SESSION["cantidadcargadas"])) 
	   $_SESSION["cantidadcargadas"]=10;

$res = $cnx->query("SELECT COUNT(id) FROM actor_info");
$numRows = $res->fetchColumn();

   if((int)$numRows >= (int)$_SESSION["cantidadcargadas"] ){
	   $sql ="SELECT id, first_name, film_info from actor_info  ORDER BY id LIMIT " . $_SESSION["cantidadcargadas"] . ",10";  
	   $res = $cnx->query($sql);
		      while($row = $res->fetch(PDO::FETCH_ASSOC)) {										
			   ?>
				   <li>
                	   <strong><?php echo utf8_encode($row["id"] . "-" . $row["first_name"]); ?></strong>
                       <br><?php echo strip_tags($row["film_info"]); ?>
                   </li>
			   <?php				
			   }
      $_SESSION["cantidadcargadas"]+=10;
   }
?>

Descargar el archivo scroll-infinito ↓

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *