1-Modificar el controlador para que en el metodo index(el de listar) se devuelva una respuesta
que contemple las variables necesarias para la paginacion
2-Crear un componente que lea las variables que devuelve el controler y maneje la paginacion
3-Registrar el componente de paginacion en el app.js
CategoriaController.php:
public function index(Request $request)
{
$categorias = Categoria::paginate(3);
$response = [
'pagination' => [
'total' => $categorias->total(),
'per_page' => $categorias->perPage(),
'current_page' => $categorias->currentPage(),
'last_page' => $categorias->lastPage(),
'from' => $categorias->firstItem(),
'to' => $categorias->lastItem()
],
'data' => $categorias
];
return response()->json($response);
}
creamos en resources/js/components/PaginationComponent.vue:
(la parte de html usa el estilo de coreui)
<template>
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" @click.prevent="changePage(pagination.current_page - 1)" :disabled="pagination.current_page <= 1">Ant</a>
</li>
<li v-for="page in pages" class="page-item" :class="isCurrentPage(page) ? 'active' : ''">
<a class="page-link" @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li class="page-item">
<a class="page-link" @click.prevent="changePage(pagination.current_page + 1)" :disabled="pagination.current_page >= pagination.last_page">Sig</a>
</li>
</ul>
</nav>
</template>
<style>
.pagination {
margin-top: 40px;
}
</style>
<script>
export default {
props: ['pagination', 'offset'],
methods: {
isCurrentPage(page) {
return this.pagination.current_page === page;
},
changePage(page) {
if (page > this.pagination.last_page) {
page = this.pagination.last_page;
}
this.pagination.current_page = page;
this.$emit('paginate');
}
},
computed: {
pages() {
let pages = [];
let from = this.pagination.current_page - Math.floor(this.offset / 2);
if (from < 1) {
from = 1;
}
let to = from + this.offset - 1;
if (to > this.pagination.last_page) {
to = this.pagination.last_page;
}
while (from <= to) {
pages.push(from);
from++;
}
return pages;
}
}
}
</script>
en app.js
Vue.component('pagination', require('./components/PaginationComponent.vue'));
ya se puede usar el componente, dentro del componente de categoria que maneja toda la grilla de categorias
<pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="fetchRecords()"></pagination>
...
<script>
export default {
data(){
return {
nombre:'',
descripcion:'',
arrayCategorias:[],
modal:0,
tituloModal:'',
accion:'',
errors:[],
categoria_id:0,
pagination: {
'current_page': 1
}
}
},
mounted() {
this.fetchRecords();
},
methods:{
fetchRecords() {
axios.get('/categorias?page=' + this.pagination.current_page)
.then(response => {
//console.log(response);
this.arrayCategorias = response.data.data.data;
this.pagination = response.data.pagination;
})
.catch(error => {
console.log(error.response.data);
});
},
