Laravel 8 Pagination By Using Vue Js Example

Today now in this post i will show you how to make pagination in laravel 8 application by using Vue Js. In my last post i was show a Laravel 8 CRUD operation with Vue js. For better know you can visit here How to Create CRUD Operation on Laravel 8 with Vue JS ?

Source Code Download From GitHub clickHere.

Here i will only show you how we can create pagination by using Vue Js.

If we are making the pagination and do it by using Vue js then it more beautiful. In Vue js Pagination load the only our table data instead of whole page. So Vue pagination is very helpful for us. Now In this post i am going to make it. So let’s learn how to make it.

Step 1: Create Controller

just need to update our controller with the bellow code. Copy the bellow code and updated with your old code.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\CompanyName;

class CompanyNameController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $data = CompanyName::paginate(2);
        return response()->json($data);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
       
        $company = new CompanyName([
            'company_name' => $request->input('company_name'),
            'detail' => $request->input('detail')
        ]);
        $company->save();

        return response()->json('Company created!');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $company = CompanyName::find($id);
        return response()->json($company);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $company = CompanyName::find($id);
        $company->update($request->all());

        return response()->json('Company updated!');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $company = CompanyName::find($id);
        $company->delete();

        return response()->json('Company deleted!');
    }
}

Step 2: Installation vue js :

Run following command

npm install laravel-vue-pagination

Step 3 : Working on app.js and Components

Go to your resources/assets/js/app.js and paste this following code

resources/assets/js/app.js 

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

import Vue from 'vue'

import App from './App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import axios from 'axios';
import {
    routes
} from './routes';


Vue.use(VueRouter);
Vue.use(VueAxios, axios);
Vue.component('pagination', require('laravel-vue-pagination'));

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

Now update the bellow code in resources/js/components/AllCompany.vue file.

<template>
  <div>
    <h2 class="text-center">Company List</h2>

    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Detail</th>
          <!-- <th>Actions</th> -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="company in company_name.data" :key="company.id">
          <td>{{ company.id }}</td>
          <td>{{ company.company_name }}</td>
          <td>{{ company.detail }}</td>
          <td>
            <div class="btn-group" role="group">
              <router-link
                :to="{name: 'edit', params: { id: company.id }}"
                class="btn btn-success"
              >Edit</router-link>
              <button class="btn btn-danger" @click="deleteCompany(company.id)">Delete</button>
            </div>
          </td>
        </tr>
      </tbody>
      <pagination :data="company_name" @pagination-change-page="getResults"></pagination>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      company_name: []
    };
  },
  created() {
    this.getResults();
  },
  methods: {
    deleteCompany(id) {
      this.axios
        .delete(`http://localhost:8000/api/Company/${id}`)
        .then(response => {
          let i = this.company_name.map(data => data.id).indexOf(id);
          this.company_name.splice(i, 1);
        });
    },
    getResults(page) {
      if (typeof page === "undefined") {
        page = 1;
      }
      this.axios
        .get("http://localhost:8000/api/Company?page=" + page)
        .then(response => {
          this.company_name = response.data;
          console.log(company_name);
        });
    }
  }
};
</script>

Now you have to run below command for update app.js file:

npm run dev

Read Also: How we can create virtual host in ubuntu apache?

Thanks for read. I hope it help you. For more you can follow us on facebook

Please leave this field empty

Email Address *

Check your inbox or spam folder to confirm your subscription.