I created a paging component and took the items sent by the server that are already paged in 5 per page. The next button works correctly bringing all the pages, but the pagination only stays from 1 to 5 being that the go to page 6 for example wanted it to display from 6 to 10.
Beginningofcodes:
import axios from 'axios'
export default {
name: "TableBase",
data() {
return {
search: '',
data: [],
objects: [],
pages: [],
}
},
props: {
titleTable: String,
actionButton: String,
collumns: Array
},
methods: {
pagination() {
this.pages = [];
for (var i = 1; i < this.objects.length + 1; i++) {
this.pages.push(i);
}
},
ajax(page) {
axios
.get('http://127.0.0.1:8000/api/categories?page=' + page)
.then(response => {
this.data = response.data;
this.objects = response.data.data;
this.pagination();
})
.catch(error => {
console.log(error);
})
},
navigate(page) {
this.ajax(page);
},
previousPage() {
if (this.data.current_page > 1) {
this.ajax(this.data.current_page - 1);
}
},
nextPage() {
if (this.data.total / this.data.current_page !== this.data.per_page) {
this.ajax(this.data.current_page + 1);
}
}
},
mounted() {
axios
.get('http://127.0.0.1:8000/api/categories')
.then(response => {
this.data = response.data;
this.objects = response.data.data;
this.pagination();
})
.catch(error => {
console.log(error);
})
}
}.card-header {
justify-content: space-between;
.box-title {
margin: 10px;
p {
text-transform: uppercase;
}
.button {
margin-left: 10px;
}
}
.box-search {
input {
box-shadow: none;
}
margin: 20px;
}
}
.card-content {
overflow-x: auto;
.fa-edit {
color: blue;
}
.fa-trash-alt {
color: red;
}
}<template>
<div>
<section class="section">
<div class="container">
<div class="card">
<div class="card-header">
<div class="box-title">
<p class="card-header-title">{{ titleTable }}</p>
<button class="button is-link is-outlined">Novo</button>
</div>
<div class="box-search">
<input class="input is-rounded" type="text" placeholder="Busca" v-model="search">
</div>
</div>
<div class="card-content">
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
<th v-for="(collumn, index) in collumns" :key="index">{{ collumn }}</th>
</tr>
</thead>
<tbody>
<tr v-for="object in objects" :key="object.id">
<td>{{ object.id }}</td>
<td>{{ object.name }}</td>
<td><i class="far fa-edit"></i></td>
<td><i class="far fa-trash-alt"></i></td>
</tr>
</tbody>
</table>
</div>
<footer class="card-footer">
<div class="card-footer-item">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" :disabled="data.current_page === 1"
@click="previousPage">Anterior</a>
<a class="pagination-next" :disabled="data.current_page === data.last_page"
@click="nextPage">Próxima</a>
<ul class="pagination-list">
<li v-for="(page, index) in pages" :key="index">
<a class="pagination-link" @click="navigate(page)"
:class="{ 'is-current': page === data.current_page }">{{ page }}</a>
</li>
</ul>
</nav>
</div>
</footer>
</div>
</div>
</section>
</div>
</template>