I am in the process of learning with this framework ( vue. js ) 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).
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.