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

Crear una paginación con ajax en laravel 4 desde mi punto de vista es algo más complejo, ésto es por la forma que tiene el framework de enviar el objeto que retorna la consulta de la paginación, ya que es un objeto con mucha información, y si tratas de pasarlo a jQuery con la clase Response haciendo uso del método json, esta información no llega correctamente.

Ya que hemos aprendido a crear un paginador en laravel 4, vamos a utilizarlo, pero en vez de realizar una paginación sencilla como aquí lo haremos con ajax haciendo uso de jQuery.

Así que, por ejemplo, esta forma no sirve, pero nosotros vamos a ingeniárnosla para que funcione y lo haga de forma correcta :).

Aquí un primer vistazo del resultado final.

Paginación con ajax en laravel 4
Paginación con ajax en laravel 4

Paginación con ajax en laravel 4

Con todo lo anterior podemos empezar por crear el proyecto, lo llamaremos para este caso pagination_ajax_laravel.com, ésto está explicado en como instalar laravel 4, así que si tienes dudas puedes dirigirte allí, una vez creado podemos crear la base de datos, veamos.

Base de datos y migraciones

Creamos una base de datos llamada ajax_laravel y abrimos el proyecto con nuestro editor preferido, una vez hecho nos dirigimos a app/config/database.php y modificamos el array que hace referencia a la conexión mysql colocando el nombre de nuestra base de datos ajax_laravel, de tal forma que quede así.

Una vez hecho esto nos dirigimos a la terminal y podemos crear la tabla migrations, para ello escribimos el siguiente comando situados en la raíz de nuestro proyecto.

Ahora podemos crear las migraciones para usuarios y posts, para esto debemos escribir lo siguiente.

Primero una y después la otra, una vez hecho tendremos dos nuevas migraciones en app/database/migrations, una para la tabla usuarios y otra para posts, así que podemos abrir la de usuarios y dentro colocamos el siguiente código.

Y lo mismo debemos hacer para los posts.

Ahora, para popular con datos la tabla posts nos dirigimos a database/seeds/DatabaseSeeder.php y dentro colocamos el siguiente código.

Una vez hecho esto, podemos dirigirnos de nuevo a la terminal y escribimos de nuevo lo siguiente.

Primero el comando migrate, y una vez hecho, el comando seed. Una vez hecho, ya tendremos las tablas creadas y con datos para poder crear la paginación.

El paginador

Ahora es momento de crear nuestro paginador, ésto lo puedes hacer visitando este tutorial, como verás es muy sencillo, una vez seguidos todos los pasos, podemos centrarnos en como hacer la paginación con ajax.

Los estilos css

Ahora simplemente debemos descargar la siguiente carpeta llamada css y colocarla en el directorio app/public, aquí están los archivos del framework foundation y de normalize.

Descargar archivos css

El archivo routes.php

Ahora nos dirigimos al archivo routes.php alojado en app/routes.php y dentro colocamos el siguiente código, el cuál se encargará de obtener los posts y saber si es una petición ajax o no para devolver la información de una u otra forma.

Como vemos, ésto lo hacemos en la raíz de la aplicación. Como podemos ver, tenemos dos vistas, la principal está alojada en app/views/blog y se llama post.blade.php, así que la creamos y dentro colocamos el siguiente código.

Lo único que puede saltar a simple vista es que hacemos uso de @include, ésta es una forma de poder realizar la paginación en laravel 4 haciendo uso de ajax y jQuery, colocar el código donde está la información a paginar en un archivo e incluirlo de esta forma.

Como podemos ver, el archivo que llamamos con include es el mismo que utilizamos en routes si es una petición ajax, y debe estar alojado en app/views/blog/ajax.blade.php, así que lo creamos y dentro colocamos el siguiente código.

Ésto es lo que se incluirá en la sección include del archivo post.blade.php, los posts paginados.

Como podemos ver, estamos llamando a un archivo llamado funtions.js alojado en app/public/js, así que dentro de public creamos el directorio js, dentro creamos el archivo functions.js y colocamos el siguiente código, el cuál será el encargado de detectar cuando se pulse en un enlace de la paginación y hacer la petición al archivo routes y devolver la respuesta a la vista ajax.blade.php, así de sencillo.

Si te fijas, hacemos uso de un loader para simular que se están cargando los datos, preloader paginación ajax laravel 4, ésa es la carpeta con el preloader, simplemente debes colocar esa carpeta en app/public y funcionará sin problemas.

Ahora sólo debes ir a app/public/css y cambiar el código de estilos.css por el siguiente para que los enlaces de nuestra paginación se vean correctamente.

Y eso es todo, ya tenemos montada una paginación con ajax en laravel 4, si ahora accedes a la raíz del proyecto debes poder ver el ejemplo funcionando correctamente, espero que te sea de ayuda y un saludo.