Comparte en Facebook Twitter Google+

paginación en vue.js banner

vue-paginate es un plugin de Vue.js que nos permite agregar paginación a nuestras aplicaciones. El funcionamiento de vue-paginate es muy simple: le das un arreglo de elementos, indicas cuántos quieres mostrar por página y obtienes una lista de elementos paginados.

Instalación

Para comenzar, lo primero que tenemos que hacer es instalar vue-paginate con npm:

Una vez instalado necesitamos importar vue-paginate. Tenemos dos opciones, utilizando la sintaxis de ES6 (que yo prefiero):

O utilizando la sintaxis de ES5:

Funcionamiento de vue-paginate

En vue-paginate tenemos dos componentes principales, Paginate y PaginateLinks. Para paginar cualquier listado de datos tenemos que:

  • Registrar el nombre de la lista.
  • Utilizar el componente Paginate para paginar y mostrar la lista paginada.
  • Utilizar el componente PaginateLinks para mostrar los enlaces de la paginación.

Paginando un listado de datos

Supongamos que en data tenemos una pequeña lista de nombres dentro de un arreglo llamado people:

Queremos mostrar estos nombres, pero sólo dos por cada página. Lo primero que tenemos que hacer es registrar el nombre de nuestro listado. Hacemos esto agregando dicho nombre a un arreglo llamado paginate, también en data:

Luego de esto podemos utilizar el componente Paginate para paginar el listado. A este componente debemos pasarle tres props: name, list y per:

  • En name indicamos el nombre que utilizamos para registrar el listado en paginate.
  • En list indicamos el nombre de nuestro arreglo.
  • En per indicamos el número de elementos que queremos mostrar por página.

En nuestro caso utilizamos el mismo nombre tanto en paginate como en nuestro arreglo, así que simplemente asignamos people a name y list. Finalmente, como queremos mostrar sólo dos elementos por página, asignamos el valor 2 a per:

Dentro de <paginate> mostramos nuestra lista. Para poder hacer esto utilizamos el método paginated, pasando como argumento el nombre que registramos en paginate:

Con esto ya tenemos nuestra lista paginada. Sin embargo, aún no tenemos una forma de poder navegar entre las páginas. Para poder hacer esto utilizamos el componente PaginateLinks, pasando como valor en for el nombre que registramos en paginate:

Finalmente, nuestro código debería quedar así:

<paginate> siempre debe ser renderizado antes de <paginate-links>.

Personalización

Podemos personalizar la forma en la que mostramos nuestro listado. Por ejemplo, si quisiéramos mostrar nuestro listado en una tabla en lugar de una lista, simplemente debemos indicar el tipo de etiqueta que queremos utilizar con tag:

Ten en cuenta que aquí estamos indicando que <paginate> debe ser una etiqueta <tbody> y no la tabla como tal.

También podemos agregar clases y estilos al componente <paginate-links>. Si utilizas Bootstrap puedes agregar los estilos de paginación (y cualquier otra clase CSS) de la siguiente manera:

Implementar una paginación básica en nuestra aplicación es muy fácil, como lo has podido ver en este tutorial. En el repositorio de GitHub de vue-paginate puedes ver todas las opciones de personalización y configuración disponibles.

Material relacionado

Aprende más sobre Vue viendo nuestro Curso de Vue.js 2 o leyendo nuestro libro La Elegancia de Vue 2.

Aprende desarrollo web con Laravel, Vue.js y mucho más a partir de 9 USD al mes: ver planes.