Pagination Component in Oruga UI Vue 3 and Laravel
With the list with the Oruga UI table ready, the next thing to do is the pagination; to do this, we are going to use the Oruga pagination component, which receives several parameters; many of them in shape, for styles and little else:
- @change="updatePage" Event that is executed when clicking on a paginated link, in these cases you must use it to update the list
- :total="posts.total" Indicates the total number of records
- v-model:current="currentPage" Indicates the v-model to be updated with the current page index
- :range-before="2" Number of pages to appear before the current page.
- :range-after="2" Number of pages to appear after the current page.
- order="centered" Centered pagination.
- size="small" Pagination type.
- :simple="false" Layout, if simple or complete.
- rounded="true" Rounded layout.
- :per-page="posts.per_page" How many posts to show per page.
In Laravel, when using the paging component, we have all these parameters already defined; therefore, the integration is direct.
***
</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
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter