in VueJS

VueJS Laravel Pagination Component

In this tutorial we're going to build a VueJS component you can use in your Laravel 5.4 projects when dealing with pagination. A component is one of the most powerful features of VueJS they allow you to encapsulate reusable code you can use in multiple places throughout your application.

Pagination

Laravel provides you with a very easy to use pagination functionality out of the box. All you have to do is use the paginate method on your database queries. Instead of using the get() method to return all the results you'll use paginate( $perPage ); passing in the amount of items you want to return per page.


$posts = DB::table('posts')->get();

$posts = DB::table('posts')->paginate(10);

This will return a LengthAwarePaginator class that also returns meta information you can use to build a pagination component in your HTML. Data such as


{
   "total": 50,
   "per_page": 10,
   "current_page": 1,
   "last_page": 4,
   "next_page_url": "http://paulund.dev?page=2",
   "prev_page_url": null,
   "from": 1,
   "to": 10,
   "data":[
        {
            // Result Object
        },
        {
            // Result Object
        }
   ]
}

Using the data properties current_page, last_page we can build a previous and next pagination buttons. ## VueJS Pagination Component

Using the component we need to pass in two pieces of data, first the pagination information stated above, second what to do on the click event of the buttons, in this example we're going to call a getPosts() method. VueJS components allow us to split up the HTML to the JavaScript. Starting with the JavaScript side we need to accept a prop for the pagination information. Then add a method that will change the current_page number.


<script>
    export default{
        props: {
          pagination: {
              type: Object,
              required: true
          }
        },

        methods: {
            changePage ( page ) {
                this.pagination.current_page = page;
            }
        }
    }
</script>

Building the HTML for this is going to be quite simple as it's just two buttons a previous page button and a next page button. The previous page button will have a click event that will call the changePage method passing the current page minus 1. We also want to only display this button when the current_page is more than 1, therefore we add a v-if check onto this element. The next page button will have a click event that will call the changePage method passing the current page plus 1. Like the previous button we don't need to display this when we've reached the end of the pages, therefore there is a check to see if the current page is more than or equal to the total pages.


<template>
    <nav class="nav pagination">
        <span class="nav-left button"
              @click.prevent="changePage(pagination.current_page - 1)"
              aria-label="Previous"
              v-if="pagination.current_page > 1">Prev</span>
        <span class="nav-right button"
              aria-label="Next"
              @click.prevent="changePage(pagination.current_page + 1)"
              v-if="pagination.current_page < pagination.last_page">Next</span>
    </nav>
</template>

Include Pagination On Page

Now we can use this pagination component anywhere in our application, just import it into your parent component.


import pagination from 'pagination.vue';

Add it to your component list.


components: {
    pagination
}

Then add it to your HTML passing in the pagination data and the click event for when the buttons are clicked. In this example the click event on the actual buttons to change the current page will run first then it will call the getPosts method passing in the new current page parameter. In our API call back to Laravel we simply add this page number onto the end of the URL as a querystring /posts?page=2 and Laravel will fetch the send page of results.


<pagination v-bind:pagination="meta.pagination" v-on:click.native="getPosts(meta.pagination.current_page)"></pagination>

Login to access all content on Paulund

Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email