How to incorporate a page paging in Vuejs?

1

I am in the process of learning with this framework () and I need to find a way to add a page in a table, by which, it should be expanded as more objects are added and then list them in the table and limit the number of items to be displayed by tab .

the table used is the following.

<table class="table table-responsive">
  <thead>
    <tr>
      <th>Título</th>
      <th>Tipo</th>
      <th>Categoría</th>
      <th>Fecha creación</th>
      <th>Acción</th>
    </tr>
  </thead>
  <tbody>
    <tr :key="post.IDEN_PUBLICACION" v-for="post in posts" v-if="!post.FLAG_VALIDADO && !post.FLAG_BAN">
      <td>{{post.NOMB_PUBLICACION}}</td>
      <td>{{post.CODI_TIPO_PUBLICACION == 'P' ? 'Producto' : 'Servicio' }}</td>
      <td>{{post.categoria.NOMB_CATEGORIA}}</td>
      <td>{{post.FECH_CREACION | dateFormat}}</td>
      <td>
        <a class="btn btn-success" @click="acceptPost(post)" title="Aceptar"><icon name="check"></icon></a>
        <a class="btn btn-danger" @click="ban(post)" title="Rechazar"><icon name="times"></icon></a>
      </td>
    </tr>
  </tbody>
</table>

Searching, I found that there are plugins that can help this time, but if I manage to implement it visually, I do not know how to start developing the behavior I need.

I try with 'vue-paginate'.

<!--Paginación de tabla -->
  <template>
    <paginate
      :page-count="5"
      :page-range="1"
      :margin-pages="1"
      :click-handler="recorrerTabla"
      :prev-text="'Anterior'"
      :next-text="'Siguiente'"
      :container-class="'pagination'"
      :page-class="'page-item'">
    </paginate>
  </template>

Method:

methods: {
  acceptPost (post) {
  controller.acceptPost(this, post)
},
recorrerTabla: function (pageNum) {
  console.log(pageNum)
},

In summary I need, although using vue-paginate or some other alternative method, that the paging allows me to scroll through the total items of the table, but divided by tabs of 5 items and, if possible, that the number of pages is accommodate the total of items (Ex: total items: 15, paging shows 3 tabs to go through).

Image from the view

Technologies used:

- Vuejs 2.4
 - Node 8+
 - Nuxt 1.0.0 - RC11
 - Nuxt / Axios 4.5.0
 - JWT-Decode 2.2.0
 - Js-Cookie
 - Vee-Validate

In advance, thanks for your answers and any documentation or example of help.

    
asked by Ignacio Antillanca 18.07.2018 в 18:22
source

0 answers