Curso de Laravel 5
Curso de Laravel 5
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Vamos a crear un ejemplo de paginación con ajax en laravel 4 cargando contenido hacia abajo con un preloader al pulsar un botón, si tenemos posts que cargar se mostrarán ordenados a continuación del último, en otro caso, el botón será deshabilitado y mostrará como texto que ya no hay más posts que mostrar.

Como podemos ver, esto puede ser muy útil en muchos casos y fácilmente puede ser modificado según nuestras necesidades, así que con esta pequeña explicación, empecemos con el código.

Ajax en laravel 4

El que tenga dudas sobre la instalación de laravel 4, que pase por aquí, con esto podemos empezar por crear una base de datos llamada ajax_laravel4, y procedemos a hacer una migración para una tabla posts y popularla con el uso de seeding que nos ofrece laravel 4.

Con esto abrimos la migración y colocamos el siguiente código para crear la tabla posts.

Ejecutamos la migración.

Ahora procedemos a popular la tabla con el uso de seeding, abrimos el archivo DatabaseSeeder.php y colocamos lo siguiente.

Ahora lo ejecutamos desde la terminal con el siguiente comando, con lo que nuestra tabla posts ya tendrá 11 posts.

Lo primero que debemos hacer es crear nuestra estructura de directorios, dentro de la carpeta public deberemos colocar la siguiente carpeta que contiene los css foundation.

Descargar archivos css

Esta carpeta llamada imgs contiene el preloader y también debe ir dentro de public.

Descargar preloader ajax

Ahora, debemos crear una carpeta llamada js y dentro creamos un nuevo archivo llamado functions.js, de momento lo dejamos así, más tarde volveremos.

Abrimos el archivo routes.php y colocamos el siguiente código, de momento esto nos servirá para poder mostrar los 4 primeros posts, después haremos la ruta que carga más posts, veamos.

Listo, si visitamos la ruta home nos dará error …, simplemente falta la vista. Con esta ruta le decimos que queremos cargar los 4 primeros posts, si tienes dudas con este código pasa por el tutorial fluent query en laravel 4.

Creamos el archivo home.blade.php dentro de la carpeta views y dentro colocamos el siguiente código.

Como vemos, cargamos todos los archivos css y js en la cabecera de la página y a continuación recorremos el array que contiene los 4 posts que hemos enviado desde la ruta home. A la variable id le asignamos la id del post, de esta forma, al acceder fuera del loop al valor de id, ésta sólo contendrá la id del último post, que es realmente la que necesitamos para poder obtener los siguientes posts y se la asignamos al atributo id del botón, así de sencillo.

Ahora debemos crear el código jQuery que se encargue de obtener los posts y de mostrarlos de forma correcta a continuación de los que ya hay, así que abrimos el archivo functions.js que habíamos creado y dentro colocamos el siguiente código.

Al pulsar el botón loadMore iniciamos la petición, lo primero es obtener la id del último post, eso lo guardamos en la variable id, después declaramos dos variables más, una para guardar la última id de los posts que mostremos a continuación, y la variable html que será donde guardemos el html que queremos imprimir a continuación de los posts.

Comprobamos la variable id y hacemos una petición post a nuestro proyecto, en concreto a la ruta more_posts pasando la variable id.

Mientras la petición es procesada mostramos el preloader, para esto primero ocultamos el botón y a continuación mostramos el preloader.

Si la petición se lleva a cabo correctamente entonces ocultamos el preloader y mostramos el botón de nuevo.
Finalmente, si data.response es true, significa que tenemos posts que mostrar y los mostramos, en otro caso significa que no hay más posts.

Con la línea:

Simplemente hacemos que el scroll siempre permanezca al final del todo, así siempre veremos el botón, esto se puede eliminar sin ningún tipo de problemas y funcionará todo correctamente.

Ahora sólo nos queda crear la ruta more_posts y podremos dar por terminado el tutorial.

Y eso es todo, simplemente decir que take sirve para limitar los resultados, simplemente eso. Espero que te sea de ayuda para ir conociendo un poco más laravel 4 unido a jQuery, que hoy en día es algo necesario, por no decir obligatorio, y gracias por suscribirte al blog, con ésto estás ayudando a que sea posible darle continuidad.