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

En español

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.