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:
npm install vue-paginate --save
Una vez instalado necesitamos importar vue-paginate. Tenemos dos opciones, utilizando la sintaxis de ES6 (que yo prefiero):
import VuePaginate from 'vue-paginate' Vue.use(VuePaginate)
O utilizando la sintaxis de ES5:
var VuePaginate = require('vue-paginate')
Vue.use(VuePaginate)
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
Paginatepara paginar y mostrar la lista paginada. - Utilizar el componente
PaginateLinkspara 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:
data: {
people: [
'Richard Hendricks',
'Erlich Bachman',
'Nelson Bighetti',
'Bertram Gilfoyle',
'Dinesh Chugtai',
'Jared Dunn',
'Jian-Yang'
],
}
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:
data: {
people: ['Richard Hendricks', 'Erlich Bachman', 'Nelson Bighetti', 'Bertram Gilfoyle', 'Dinesh Chugtai', 'Jared Dunn', 'Jian-Yang'],
paginate: ['people']
}
Luego de esto podemos utilizar el componente Paginate para paginar el listado. A este componente debemos pasarle tres props: name, list y per:
- En
nameindicamos el nombre que utilizamos para registrar el listado enpaginate. - En
listindicamos el nombre de nuestro arreglo. - En
perindicamos 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:
<paginate name="people" :list="people" :per="2"></paginate>
Dentro de <paginate> mostramos nuestra lista. Para poder hacer esto utilizamos el método paginated, pasando como argumento el nombre que registramos en paginate:
<paginate name="people" :list="people" :per="2">
<li v-for="person in paginated('people')">
{{ person }}
</li>
</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:
<paginate-links for="people"></paginate-links>
Finalmente, nuestro código debería quedar así:
<paginate name="people" :list="people" :per="2">
<li v-for="person in paginated('people')">
{{ person }}
</li>
</paginate>
<paginate-links for="people"></paginate-links>
<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:
<paginate name="people" :list="people" :per="2" tag="tbody">
<tr v-for="person in paginated('people')">
<td>{{ person }}</td>
</tr>
</paginate>
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:
<paginate-links for="people" :classes="{'ul': 'pagination', 'li': 'page-item', 'a': 'page-link'}"></paginate-links>
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.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
