https://app.gitbook.com/o/-LpbFntRLucV803q_8VL/s/zKaxpAhzEszGTfXN0vQI/vue-pagination-axio-full-ok
Last updated
a
Front-end C:\xampp\htdocs\vl\resources\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');
window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('navbar', require('./components/Nav.vue').default);
Vue.component('foot', require('./components/Footer.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});C:\xampp\htdocs\vl\resources\js\components\Customers.vue
<template>
<div class="container">
<ul class="pagination mt-3">
<li class="page-item">
<a class="page-link" href="#" @click="fetchCustomers(pagination.first_page_url)">First</a>
</li>
<li class="page-item" :class="{disabled:!pagination.next_page_url}">
<a class="page-link" href="#" @click="fetchCustomers(pagination.next_page_url)">Next</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">{{ pagination.current_page }} ... {{ pagination.last_page }}</a>
</li>
<li class="page-item" :class="{disabled:!pagination.prev_page_url}">
<a class="page-link" href="#" @click="fetchCustomers(pagination.prev_page_url)">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#" @click="fetchCustomers(pagination.last_page_url)">Last</a>
</li>
</ul>
<div class="row justify-content-center">
<div class="col-md-12 col-lg-12">
<div class="card">
<div class="card-header">Customer</div>
<div class="card-body pb-0" v-for="ctm in customers">
<p>Name: {{ctm.name_customer}}</p>
<p>Address: {{ctm.address_customer}}</p>
<p>City: {{ctm.city_customer}}</p>
<p>Email: {{ctm.email_customer}}</p>
<div>Phone: {{ctm.phone_customer}}</div>
<hr />
</div>
</div>
</div>
</div>
<ul class="pagination mt-3">
<li class="page-item">
<a class="page-link" href="#" @click="fetchCustomers(pagination.first_page_url)">First</a>
</li>
<li class="page-item" :class="{disabled:!pagination.next_page_url}">
<a class="page-link" href="#" @click="fetchCustomers(pagination.next_page_url)">Next</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">{{ pagination.current_page }} ... {{ pagination.last_page }}</a>
</li>
<li class="page-item" :class="{disabled:!pagination.prev_page_url}">
<a class="page-link" href="#" @click="fetchCustomers(pagination.prev_page_url)">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#" @click="fetchCustomers(pagination.last_page_url)">Last</a>
</li>
</ul>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
customers: [],
customer: {
"name_customer": "",
"phone_customer": "",
"address_customer": "",
"email_customer": "",
"city_customer": ""
},
id_customer: "",
pagination: {},
edit: false,
currentPage: 1,
}
},
mounted() {
this.fetchCustomers();
},
methods: {
fetchCustomers: function(page_url = null) {
let vm = this;
let meta = {};
let links = {};
page_url = page_url || 'api/customers';
fetch(page_url)
.then(response => response.json())
.then(json => {
this.customers = json.data;
meta.current_page = json.current_page;
meta.from = json.from;
meta.last_page = json.last_page;
meta.per_page = json.per_page;
meta.to = json.to;
meta.total = json.total;
links.first_page_url = json.first_page_url;
links.last_page_url = json.last_page_url;
links.next_page_url = json.next_page_url;
links.prev_page_url = json.prev_page_url;
vm.makePagination(meta, links);
})
.catch(err => console.log('Request Failed', err));
},
makePagination: function(meta, links) {
let pagination = {
current_page: meta.current_page,
first_page_url: links.first_page_url,
last_page_url: links.last_page_url,
next_page_url: links.next_page_url,
next_page_url_disabled: links.next_page_url,
prev_page_url: links.prev_page_url
}
this.pagination = pagination;
}
},
}
</script>C:\xampp\htdocs\vl\resources\js\components\Footer.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 col-lg-12">
<div class="card">
<p class="text-center">I'm an Footer.</p>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
}
</script>C:\xampp\htdocs\vl\resources\js\components\Nav.vue
<template>
<div class="container">
<ul class="nav mb-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</template>
<script type="text/javascript">
export default {
}
</script>Back-end
C:\xampp\htdocs\vl\routes\api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CustomerController;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Route::resource('customers', CustomerController::class);C:\xampp\htdocs\vl\app\Http\Controllers\CustomerController.php
<?php
namespace App\Http\Controllers;
use App\Models\Customer;
use Illuminate\Http\Request;
class CustomerController extends Controller {
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index() {
return Customer::orderBy('id',"DESC")->paginate(5);
}
/**
* 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) {
//
}
/**
* Display the specified resource.
*
* @param \App\Models\Customer $customer
* @return \Illuminate\Http\Response
*/
public function show(Customer $customer) {
return Customer::find($customer);
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Customer $customer
* @return \Illuminate\Http\Response
*/
public function edit(Customer $customer) {
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Customer $customer
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Customer $customer) {
//
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Customer $customer
* @return \Illuminate\Http\Response
*/
public function destroy(Customer $customer) {
//
}
}C:\xampp\htdocs\vl\app\Models\Customer.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Customer extends Model {
use HasFactory;
public $timestamps = false;
protected $table = 'customer';
protected $primaryKey = 'id';
protected $fillable = ['name_customer', 'phone_customer', 'address_customer','email_customer','city_customer'];
}