Componente de Paginación en Oruga UI Vue 3 y Laravel
Ya con el listado con la tabla de Oruga UI listo, lo siguiente que se va a realizar es la paginación; para ello, vamos a usar el componente de paginación de Oruga, que recibe varios parámetros; muchos de ellos de forma, para estilos y poco más:
- @change="updatePage" Evento que se ejecuta al dar un click sobre un enlace paginado, en estos casos debes de usarlo para actualizar el listado
- :total="posts.total" Indica el total de registros
- v-model:current="currentPage" Indica el v-model que se actualizará con el índice de la página actual
- :range-before="2" Cantidad de páginas que aparece antes de la página actual.
- :range-after="2" Cantidad de páginas que aparece después de la página actual.
- order="centered" Paginación centrada.
- size="small" Tipo de paginación.
- :simple="false" Diseño, si es simple o completa.
- rounded="true" Diseño redondeado.
- :per-page="posts.per_page" Cuantos registros vas a mostrar por páginas.
En Laravel, al usar el componente de paginación, tenemos todos estos parámetros ya definidos; por lo tanto, la integración es directa.
Finalmente, el componente de paginación con la tabla quedará como:
***
</o-table>
<br />
<o-pagination
v-if="posts.current_page && posts.data.length > 0"
@change="updatePage"
:total="posts.total"
v-model:current="currentPage"
:range-before="2"
:range-after="2"
order="centered"
size="small"
:simple="false"
:rounded="true"
:per-page="posts.per_page"
>
</o-pagination>
</div>
</template>
<script>
export default {
data() {
return {
posts: [],
isLoading: true,
currentPage:1,
};
},
methods: {
updatePage(){
setTimeout(this.listPage, 100);
},
listPage(){
this.isLoading = true;
this.$axios.get("/api/post?page="+this.currentPage).then((res) => {
this.posts = res.data;
console.log(this.posts);
this.isLoading = false;
});
}
},
async mounted() {
this.listPage()
},
};
</script>- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter