Implementar un scroll infinito en Laravel y jQuery

Si alguna vez te has preguntado como rayos paginar de una manera mas dinámica los registros en una aplicación web, es decir, sin necesidad de recargar la pagina como lo hace twitter o facebook, pues bien, lo primero que necesitas hacer es quedarte a ver la forma en la que te enseñaré, ya que, del lado del backend usaremos frameworks eficientes y fáciles de entender como Laravel, mientras que en el frontend vamos a usar jQuery, después de todo no soy tan geek como para matarme la cabeza con javascript y php “al desnudo”, mas bien como dicen, si ya existen herramientas, hay que aprenderlas a usar y sacarles provecho.

NOTA: Para este tutorial, asumo que tienes fundamentos básicos en el manejo de Laravel, por consiguiente de PHP y Javascript, cabe mencionar que debes tener conocimientos básicos en el uso de la linea de comando del sistema operativo.

Una vez que tengas una instalación limpia de Laravel con la librería de jQuery importada en alguna de tus vistas, necesitaremos descargarnos a su vez, la librería de Infinite Scroll, la cual va a ser la que nos hará la “magia”, simplemente abrimos el enlace que acabo de compartirles, damos clic derecho y a continuación en, “guardar enlace como…”, esto nos saltará el cuadro de dialogo para elegir en donde vamos a proceder a guardar el script. Vamos a crear la vista paginacion.blade.php dentro de su respectiva carpeta en resources/views y ponemos el siguiente contenido dentro de las etiquetas body:

<div class="contenedor">
@if( isset($viewdata['posts']) && count($viewdata['posts']) > 0 )
<div id="posts">
@foreach($viewdata['posts'] as $item)
<div class="item">
<header>
<h2>{{ $item->titulo }}</h2>
</header>
<article>
{{ $item->descripcion }}
</article>
</div>
@endforeach
</div>
<span style="visibility: hidden;">
{!! $viewdata['posts']->render() !!}
</span>
<div class="loading"></div>
@else
<p>No se encontraron registros en este momento.</p>
@endif
</div>

Ahora, en el mismo archivo que tenemos abierto, nos ubicamos al final del archivo, justo antes de la etiqueta de cierre de body y ponemos el siguiente código dentro de un bloque script de la siguiente forma:

<script src="/assets/plugins/jquery/jquery-2.1.3.min.js"></script><script src="/assets/plugins/infinite-scroll/jquery.infinitescroll.min.js"></script>
<script>
$('#posts').infinitescroll({
navSelector : "ul.pagination",
nextSelector : "ul.pagination li:last-child a",
itemSelector : "#posts div.item",
loading: {
finished: undefined,
finishedMsg: "No se encontraron mas posts para mostrar",
img: "/assets/images/reload.GIF",
msg: null,
msgText: "Cargando...",
selector: ".loading",
speed: 'fast',
start: undefined
}
});
</script>

Como ya lo he dicho, obviamente tenemos que tener previamente cargada la librería de jQuery arriba de la de infinite scroll para que funcione correctamente. En el fragmento de código javascript que hace referencia al div de posts, vemos ciertos parámetros interesantes, uno de ellos, es el, navSelector, nextSelector, e itemSelector, estos son los que nos va a ser de ayuda para que encuentre dentro del dom los enlaces de la paginación que nos crea laravel, por defecto el framework crea una lista desordenada con clase pagination y dentro un enlace, entonces, en el parametro nextSelector, apuntamos al enlace dentro del ultimo elemento li que existe en dicha lista.
Otros parametros como el loading, son opcionales, es decir, no son imprescindibles para el funcionamiento de este script, pero le da su toque fancy, el cual mejora la UI y UX de usuario.

Pero aqui no terminamos el ejercicio, nos hace falta programar lo principal, la funcion que nos va a traer los registros de una base de datos antes de cargarlos en la vista, para ello vamos a crear un controlador que se llame PaginacionController.php, el cual, lo podemos hacer de la forma mas facil que tiene laravel y que me encanta de este framework, independiemente si estas en windows, mac osx o linux, ubica la linea de comandos o terminal del sistema, posicionate en la carpeta del proyecto y escribe el siguiente comando:

php artisan make:controller PaginacionController

Esta linea lo que hará es generar automáticamente el controlador y ubicarlo directamente en la carpeta Http del proyecto. Bien, pues vamos a abrir con nuestro editor de código favorito, dicho archivo que se acaba de crear y editamos o creamos (si no esta definida aun) la función index:

public function index() {
$posts= Posts::where('activado', '=', '1')->orderBy('id', 'desc')->paginate(20);
    $this->viewData['posts'] = $posts;
    return view('paginacion')->with('viewdata', $this->viewData);
}

Aqui hay varias cosas que hay que entender, la primera de ellas es la referencia estatica hacia la clase Posts, esto quiere decir que antes de hacer esto, tenemos que crear un modelo que nos sirva para hacer las consultas a la base de datos a traves del ORM que tiene Laravel, para ello, lo creamos nuevamente con la ayuda de nuestro amigo artisan:

php artisan make:model Posts

Lo otro que tenemos que entender es la forma en la que Laravel hace las consultas, a través del ORM (Mapeo Relacional de Objetos), lo cual significa que para poder acceder al SQL, lo hacemos a través de objetos y metodos, de esta forma, el codigo anterior lo que hace es llamar al método where, orderBy y paginate respectivamente de la clase estática Posts, sin necesidad de instanciar un objeto nuevo en dicha clase controlador.
Una vez hayas realizado la consulta, este nos crea el objeto mapeado, el cual vamos a tener que pasárselo al archivo de la vista, que lo hacemos por medio de una variable de clase que previamente debemos declarar como private.

Y listo, de esta forma tendremos funcional una paginación de manera “interminable”, quiere decir, sin la necesidad de recargar la pagina. Cualquier duda o comentario que tengan al respecto, por favor pueden dejármela en la caja de comentarios o sigueme en @ferdroid8080, de igual forma si ves que te resultó de ayuda, puedes compartir esta publicación a tus compañeros, amigos, etc y esto me motivara a seguir haciendo mas tutoriales que te puedan ser de utilidad en tu carrera como desarrollador web.