Scroll infinito con Laravel 5 y jQuery

Scroll infinito con Laravel 5 y jQuery

Vamos a crear un sistema de scroll infinito con Laravel 5 y jQuery sin la necesidad de plugins, hace tiempo ya escribí un tutorial para realizar scroll infinito con Laravel 4.

Si no conoces el concepto de scroll infinito es muy sencillo, la idea es por ejemplo mostrar 5 posts. Cada vez que el usuario hace scroll y llega al final de la página, nosotros ejecutamos un evento con jQuery para obtener y mostrar los nuevos posts a partir del último que se ha mostrado utilizando ajax, y así hasta que no queden más.

Para entenderlo mejor, a continuación tienes un ejemplo del resultado final de nuestra aplicación.

laravel5-scroll-infinito
Lo primero que debemos hacer es tener datos en nuestra aplicación, así que asegúrate de tener un modelo Post con su respectiva tabla y ejecuta el siguiente seed para poder introducir datos en la base de datos.

Ahora vamos a definir las dos rutas que necesitaremos para desarrollar nuestro ejemplo, una para mostrar el primer contenido sin utilizar ajax y otra para realizar peticiones xmlHttpRequest y obtener los datos en formato json.

El controlador InfiniteController será muy sencillo, simplemente tendrá dos métodos, 1 para obtener los primeros datos y el otro para poder obtener los siguientes siempre que se trate de una petición ajax.

Cómo puedes ver, en la primera petición obtenemos 4 posts desde el primero take(0), y en el evento de scroll iremos obteniendo de 2 en 2 siempre que el id sea mayor que el id que vamos a enviar, que será el del último posts visualizado en el sistema de scroll infinito.

En este momento debemos crear un archivo infinite-scroll.blade.php para mostrar los 4 primeros posts, así que crea ese archivo y añade el siguiente código.

Si te fijas, en la cabecera de este archivo estamos llamando a un archivo llamado functions.js que está dentro del directorio js, así que vamos a crearlo.

Scroll infinito con Laravel 5 y jQuery

En este archivo es donde debemos escribir toda la lógica con jQuery para que nuestro sistema de scroll infinito con Laravel 5 funcione, así que vamos añadir el siguiente código.

Y eso es todo, de esta forma ya tenemos un sistema de scroll infinito con Laravel 5 montado y funcionando, recuerda que si tienes dudas con el código que hemos escrito tienes a tu disposición 14 cursos en cursosdesarrolloweb.es.

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
Descuentos de hasta el 50% por el Black Friday en CursosdesarrollowebAcceder ahora
+ +