La paginación es una muy buena práctica para organizar nuestra información y mostrársela a nuestros usuarios.
En VueJs existe una librería javascript que nos facilita mucho esta tarea y en cuestión de minutos, tenemos nuestra información paginada.
Instalaremos en nuestra aplicación, mediante npm, la librería vue-paginate con el siguiente comando:
npm install vue-paginate --save
Para utilizar la librería vue-paginate, la importaremos en nuestro archivo main.js
import Vue from 'vue'
import App from './App.vue'
import VuePaginate from 'vue-paginate';
Vue.use(VuePaginate);
new Vue({
el: '#app',
render: h => h(App)
})
Y en nuestro componente app.vue crearemos dos arrays, paginate y arrayStrings.
Paginate hará referencia a la paginación y arrayStrings contendrá 20 string que utilizaremos para paginar:
<script>
export default {
name: 'app',
data () {
return {
paginate:['arrayStrings'],
arrayStrings:[
"String1","String2","String3","String4","String5","String6","String7","String8","String9","String10",
"String11","String12","String13","String14","String15","String16","String17","String18","String19",
"String20",
],
}
}
}
</script>
Ahora recorreremos nuestro arrayString en el template, como hacemos normalmente, pero esta vez dentro de la etiqueta «paginate«
<template>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<paginate ref="paginator" name = "arrayStrings" :list = "arrayStrings" :per = "5">
<p v-for="string in paginated('arrayStrings')" :key="string.id">{{string}}</p>
</paginate>
<paginate-links
for="arrayStrings"
:show-step-links="true"
:simple="{
prev: 'Anterior',
next: 'Siguiente'
}"
></paginate-links>
</div>
</div>
</div>
</template>
De esta forma paginamos nuestro array, mostrando 5 strings por cada hoja, como hemos configurado en el atributo per de la etiqueta paginate.
La etiqueta paginate-links, nos generará los botones necesarios para poder navegar hacia la página siguiente o anterior de nuestra paginación.
Podemos añadirle un estilo a estos botones, ya que no tienen estilo por defecto:
<style>
.paginate-links{
width:100%;
list-style: none;
text-align: center;
}
.paginate-links li {
display: inline;
background-color:#E43A48;
color:white;
padding:0.5rem;
margin-left:0.3rem;
margin-right: 0.3rem;
cursor:pointer;
border-radius: 3px;
}
.paginate-result{
width: 100%;
text-align:center;
margin-bottom: 1rem;
}
</style>
Finalmente, este sería el resultado de nuestra paginación en VueJs:
¡Suscríbete y no te pierdas nuevas entradas!