Paginación en Vuejs

Paginar datos en Vuejs

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.

Instalación de la libreria vue-paginate

Instalaremos en nuestra aplicación, mediante npm, la librería vue-paginate con el siguiente comando:

npm install vue-paginate --save

Paginar array en nuestro componente

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!