Hoy vamos a explicar como agregar una paginación a nuestra lista de posts. Explicaremos como agregar varios tipos de paginaciones. Uno será una paginación simple (Siguiente y anterior), otra paginación con números y otra personalizada.
Paginación simple
Primero vamos a ver como se añade una paginación simple. En este tipo de paginación simplemente nos saldrá unos botones en los que podremos elegir entre ir a la página anterior o a la siguiente.
Abrimos el controlador y substituimos la línea que hace la consulta en el método index por ésta:
|
1 2 3 |
... $posts = Post::orderBy('id', 'desc')->simplePaginate(6); .. |
Lo que hace es coger todos los posts, ordenarlos por id descendiente y paginar los resultados cada 6 posts. Es decir, en cada página aparecerán como máximo 6 posts.
Una vez hecho ésto, debemos agregar en la vista (fuera del bucle) estas líneas para que se muestre la paginación:
|
1 2 3 |
@if (count($posts)) {{ $posts->links() }} @endif |
Paginación con números
Este tipo de paginación, nos aparecen las páginas por números, para poder ir directamente a la que queramos.
Abrimos el controlador y modificamos la misma línea de antes:
|
1 2 3 |
... $posts = Post::orderBy('id', 'desc')->paginate(6); .. |
Esta línea hace lo mismo que la anterior, pero se mostrará una paginación diferente.
El código de la vista se queda igual.
Paginación personalizada
Este tipo es un poquito más laborioso de aplicar, será una paginación personalizada, ya que le podremos dar el estilo que queramos fácilmente modificando un poco el HTML.
Primero de todo, tengo que decir que vamos a seguir un post de StackOverflow que está muy bien y es muy sencillo de aplicarlo.
Creamos un archivo en resources/views/includes llamado pagination.blade.php y tendrá el contenido del post de StackOverflow:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@if ($paginator->lastPage() > 1) <ul class="custom-pagination"> <li class="{{ ($paginator->currentPage() == 1) ? ' disabled' : '' }}"> <a href="{{ $paginator->url(1) }}">Previous</a> </li> @for ($i = 1; $i <= $paginator->lastPage(); $i++) <li class="{{ ($paginator->currentPage() == $i) ? ' active' : '' }}"> <a href="{{ $paginator->url($i) }}">{{ $i }}</a> </li> @endfor <li class="{{ ($paginator->currentPage() == $paginator->lastPage()) ? ' disabled' : '' }}"> <a href="{{ $paginator->url($paginator->currentPage()+1) }}" >Next</a> </li> </ul> @endif |
Yo he modificado la clase pagination a custom-pagination, porque si no, se veía igual que la paginación con números y no se veía la diferencia.
En la vista, deberemos substituir la línea puesta antes por ésta:
|
1 |
@include('includes.pagination', ['paginator' => $posts]) |
Nota: para que Laravel pueda acceder a ciertos métodos que se llaman en el include de la paginación personalizada, debemos dejar, en el controlador, el método paginate.
Y con esto ya podemos modificar el HTML y agregarle el diseño que queramos a través de CSS.
-
-Paginación: https://laravel.com/docs/5.4/pagination
-Paginación personalizada: https://stackoverflow.com/a/30298599
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR