Panduan Lengkap Pagination Laravel VueJs – Haloo semuanya, Assalaamualaikum wr wb..
Sebelumnya kita sudah mempelajari tentang cara membuat CRUD dengan Laravel VueJs dalam 1 halaman..
Panduan Lengkap Pagination Laravel VueJs
Nah tapi ada 1 fitur yang belum kita selesaikan, yaitu cara membuat Pagination saat get data..
Kenapa harus pagination? karena ketika kita sudah memiliki data yang sangat banyak, anggap saja jumlah record didalam table nya sudah sampai ribuan atau bahkan jutaan data..
Maka metode untuk penarikan datanya kita memerlukan yang nama nya pagination..
Dengan pagination, kita bisa memecah data yang ingin ditampilkan dalam 1 halaman menjadi per 100 data, atau per 1000 data, tergantung dari kebutuhan..
Nah nanti untuk menampilkan 1000 data selanjutnya, kita tinggal klik button next saja..
Nanti kita juga akan membuat jumlah pecahan data perhalaman nya menjadi dinamis..
Mulai membuat pagination
Beruntung nya pada framework Laravel, kita bisa membuat pagination dengan sangat mudah..
Kita tinggal memanggil perintah paginate(), maka data yang dihasilkan sudah otomatis berupa pagination, untuk referensi dari halaman resmi nya, bisa kalian buka disini..
Membuat Endpoint API nya terlebih dahulu
Sekarang misalkan kita ingin nge-get data master product, kita tarik data nya 10 row per halaman, maka script nya adalah seperti berikut..
Kita buat route nya terlebih dahulu, misalkan seperti berikut:
....
Route::get('get-master-product-paging', 'ProductController@get_product_paging');
....
Kemudian pada file ProductController nya, kita buat sebuah function baru dengan nama get_product_paging, yang mana function tersebut kita isi dengan script seperti berikut:
....
public function get_product_paging()
{
$data = Product::select(['name', 'sku', 'type'])->orderBy('name')->paginate(10);
return response()->json($data);
}
....
Coba kalian perhatikan script diatas, kita membuat sebuah query untuk get data product yang kita tampung kedalam variable data..
Query tersebut kita buat pagination dengan memanggil perintah paginate(10).. Ini artinya data yang ingin kita tampilkan dalam setiap halaman nya yaitu hanya 10 record saja..
Kemudian variable data tersebut kita return dengan memformat nya kedalam json..
Menerima Data dengan Axios
Sekarang akan kita akses data yang barusan kita buat dengan mengakses Endpoint API nya menggunakan Axios..
Untuk script nya adalah seperti berikut:
....
<script>
var appVue = new Vue({
el: "#appVue",
data: {
url: ''
},
mounted() {
this.url = "{{ url('get-master-product-paging') }}"
this.getData();
},
methods: {
getData: function() {
axios.get(this.url)
.then(resp => {
console.log(resp.data);
})
.catch(err => {
alert('error');
console.log(err);
})
}
}
})
</script>
....
Coba kalian perhatikan script diatas, pada baris ke-6 didalam property data, kita membuat sebuah atribut baru dengan nama url..
Tujuan nya yaitu karena nanti nya url ini akan bersifat dinamis, pada setiap halaman nilai dari atribut url ini akan selalu berubah..
Pada baris ke-9, didalam property mounted(), kita beri nilai pertama pada atribut url dengan nilai url dari endpoint API nya..
Kemudian pada baris ke-13, kita membuat sebuah method dengan nama getData()..
Didalam method getData(), kita akses endpoint api nya dengan menggunakan Axios dengan parameter get, untuk url nya kita ambil dari atribut url..
Pada baris ke-16, kita print kedalam console untuk hasil response nya.. Hasil response nya adalah seperti berikut:
Kalian bisa cek gambar diatas, untuk response nya terdapat beberapa atribut, kita coba bahas satu persatu:
current_page: Untuk menandakan sekarang kita sedang berada di page berapa..
data: Berisi kumpulan data product nya atau hasil dari query nya..
first_page_url: Berisi url untuk mengarahkan kita langsung ke page pertama..
from: data pertama yang ditampilkan pada halaman tersebut adalah data yang keberapa..
last_page: Untuk menginformasikan page terakhir nya yaitu page 39..
last_page_url: Berisi url yang langsung mengarahkan kita ke page terakhir..
next_page_url: Berisi url yang digunakan untuk maju ke halaman / page selanjutnya, url ini nanti nya akan kita integrasikan dengan button Next.. Akan berisi null jika kita sudah berada di page terakhir..
path: Ini adalah base url nya
per_page: Untuk menginformasikan jumlah record yang ditampilkan dalam 1 halaman..
prev_page_url: Berisi url yang digunakan untuk mundur ke halaman / page sebelumnya, url ini nanti nya akan kita integrasikan dengan button Prev.. Akan berisi null jika kita sudah berada di page pertama..
to: data terakhir yang ditampilkan pada halaman tersebut adalah data yang keberapa
total: total keseluruhan data..
Menampilkan Data nya..
Sekarang kita coba untuk menampilkan datanya terlebih dahulu kedalam table view nya..
Pada script vue js, silahkan kalian ubah dulu seperti berikut:
<script>
var appVue = new Vue({
el: "#appVue",
data: {
url: '',
data_produk: []
},
mounted() {
this.url = "{{ url('get-master-product-paging') }}"
this.getData();
},
methods: {
getData: function() {
axios.get(this.url)
.then(resp => {
console.log(resp.data);
this.data_produk = resp.data.data;
})
.catch(err => {
alert('error');
console.log(err);
})
}
}
})
</script>
Kita bisa perhatikan script diatas..
Pada baris ke-6 kita membuat sebuah atribut baru dengan nama data_produk, atribut ini yang akan menampung list data produk nya, dan pada setiap halaman, isi dari atribut data_produk akan selalu berubah-ubah..
Pada baris ke-17, perintah untuk mengisi atribut data_produk dengan data hasil dari response endpoint api nya..
Kemudian di view nya tinggal kalian foreach seperti berikut:
....
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Sku</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<template v-for="item in data_produk">
<tr>
<td>@{{ item.name }}</td>
<td>@{{ item.sku }}</td>
<td>@{{ item.type }}</td>
</tr>
</template>
</tbody>
</table>
....
Kalo kalian refresh halaman nya, maka seharusnya akan muncul seperti berikut:
Membuat Button Next dan Prev
Ketika kita membuat fitur pagination, maka wajib ada button Next dan Prev nya..
Button Next digunakan untuk berpindah kehalaman selanjutnya, sementara button Prev digunakan untuk berpindah kehalaman sebelumnya..
Kita modifikasi script vue nya menjadi seperti berikut:
....
<script>
var appVue = new Vue({
el: "#appVue",
data: {
url: '',
data_produk: [],
next_page_url: '',
prev_page_url: ''
},
mounted() {
this.url = "{{ url('get-master-product-paging') }}"
this.getData();
},
methods: {
getData: function() {
axios.get(this.url)
.then(resp => {
console.log(resp.data);
this.data_produk = resp.data.data;
this.next_page_url = resp.data.next_page_url;
this.prev_page_url = resp.data.prev_page_url;
})
.catch(err => {
alert('error');
console.log(err);
})
},
gantiHalaman: function(url) {
this.url = url;
this.getData();
}
}
})
</script>
....
Coba kalian perhatikan pada baris ke-9 dan ke-10, kita menambahkan 2 atribut baru yaitu next_page_url dan prev_page_url..
next_page_url berisi url untuk mengarahkan kita kehalaman selanjutnya..
prev_page_url berisi url untuk mengarahkan kita kehalaman sebelumnya..
Pada baris ke-23, kita mengisi atribut next_page_url dengan nilai dari next_page_url pagination laravel nya, yang sebelumnya sudah kita lihat pada console.log nya.. begitu juga dengan atribut prev_page_url nya..
Kemudian pada baris ke-31 kita membuat sebuah method baru dengan nama gantiHalaman, yang mana pada method tersebut berisi satu parameter, yaitu parameter url..
Parameter url ini nanti nya akan kita isi dengan next_page_url jika ingin lanjut ke halaman selanjutnya, atau kita isi dengan prev_page_url jika ingin mundur kehalaman sebelumnya..
Didalam method tersebut kita mereplace nilai dari atribut url dengan nilai dari url parameter nya..
this.url = url;
Kemudian memanggil kembali method getData()..
Sekarang di view nya kalian buatkan button Prev dan Next nya seperti berikut:
....
<div>
<button v-on:click.prevent="gantiHalaman(prev_page_url)" class="btn btn-primary">Prev</button>
<button v-on:click.prevent="gantiHalaman(next_page_url)" class="btn btn-primary">Next</button>
</div>
....
Kalian bisa cek script diatas..
Pada setiap masing-masing button nya, kita menambahkan sebuah direktif event on click..
Jadi pada setiap button tersebut di klik, akan mengakses method gantiHalaman yang berada didalam script vue nya, dengan membawa parameter url..
Pada button prev memberikan parameter prev_page_url, sementara button next memberikan parameter next_page_url..
Didalam method gantiHalaman nya, kita mereplace atribut url dengan nilai url yang ada pada parameter function nya..
Kemudian memanggil kembali function getData untuk mendapatkan data yang terbaru..
Kalo kalian refresh halaman nya, maka akan muncul seperti berikut:
Sudah terdapat button next dan prev nya, kalo kalian klik button next nya, maka datanya akan otomatis berubah ke halaman selanjut nya, begitu juga dengan button prev..
Tapi sekarang yang jadi masalah adalah ketika kita sudah berada di page terakhir, kemudian kita klik button next, maka sistem akan error, kenapa? Karena ketika kita sudah berada di page terakhir, maka nilai dari next_page_url pada pagination laravel akan bernilai null..
Begitu juga dengan button prev, ketika kita sudah berada di page pertama, kemudian kita mengklik button prev, maka akan muncul error, karena nilai dari prev_page_url berisi null..
Solusi nya yaitu dengan menyembunyikan button prev ketika kita sedang berada di page pertama, dan menghilangkan button next ketika kita sudah berada di halaman terakhir..
Menghilangkan button prev saat dihalaman pertama dan menghilangkan button next saat dihalaman terakhir..
kita tinggal tambahkan aja direktif if pada button nya seperti berikut:
....
<div>
<button v-if="prev_page_url" v-on:click.prevent="gantiHalaman(prev_page_url)"
class="btn btn-primary">Prev</button>
<button v-if="next_page_url" v-on:click.prevent="gantiHalaman(next_page_url)"
class="btn btn-primary">Next</button>
</div>
....
Maka nanti ketika berada dihalaman pertama, button prev akan hilang, dan ketika berada di halaman terakhir button next akan hilang..
Membuat Jumlah Paging nya menjadi Dinamis
Sebelumnya kan kita menarik data dengan jumlah dalam 1 halaman nya hanya 10 data saja..
Nah sekarang kita ingin membuat dinamis untuk angka paging nya, jadi nanti kita akan membuat sebuah pilihan angka untuk menentukan berapa jumlah data yang ingin ditampilkan dalam 1 halaman..
Jadi mirip seperti datatables, sebelumnya kita juga sudah pernah membahas tentang Yajra datatables server side, bagi kamu yang belum membacanya, silahkan dibuka saja Pandungan Lengkap yajra datatables server side + studi kasus..
Pertama kita tambahkan dulu select option nya dibagian atas table seperti berikut, select option ini untuk menentukan berapa jumlah data yang ingin ditampilkan dalam 1 halaman:
....
<div class="row">
<div class="col-md-1">
<select class="form-control" v-model="paging" v-on:change="getData()">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
....
Coba kalian perhatikan script diatas, select option nya kita tambahkan v-model=”paging”.. Ini artinya form ini kita hubungkan dengan atribut paging yang ada pada script vue nya..
Kemudian kita juga menambahkan direktif event on change, ini artinya ketika setiap kali inputan select option diubah, maka sistem akan mengakses method getData() pada vue js nya..
....
<script>
var appVue = new Vue({
el: "#appVue",
data: {
url: '',
data_produk: [],
next_page_url: '',
prev_page_url: '',
paging: ''
},
mounted() {
this.paging = 10;
this.url = "{{ url('get-master-product-paging') }}"
this.getData();
},
methods: {
getData: function() {
axios.get(this.url, {
params: {
paging: this.paging
}
})
.then(resp => {
console.log(resp.data);
this.data_produk = resp.data.data;
this.next_page_url = resp.data.next_page_url;
this.prev_page_url = resp.data.prev_page_url;
})
.catch(err => {
alert('error');
console.log(err);
})
},
gantiHalaman: function(url) {
this.url = url;
this.getData();
}
}
})
</script>
....
Kalian perhatikan script diatas, pada baris ke-12, kita menambahkan sebuah atribut baru dengan nama paging..
Kemudian pada baris ke-15 didalam property mounted(), kita menginisialisasikan atribut tersebut dengan nilai awal 10..
Dan pada saat penarikan data nya didalam method getData() di baris ke-22, pada axios nya kita membawa atribut paging sebagai parameter..
Terakhir di controller nya kalian ubah seperti berikut:
....
public function get_product_paging()
{
$paging = request('paging');
$data = Product::where('business_id', 2)->select(['name', 'sku', 'type'])->orderBy('name')->paginate($paging);
return response()->json($data);
}
....
Coba kalian perhatikan script diatas, pada baris ke-4 kita menarik request paging nya..
Kemudian pada perintah paginate() nya, kita memasukkan variable paging nya sebagai parameter..
Kalo kalian refresh halaman nya, maka seharusnya akan muncul seperti berikut:
Sudah terdapat select option untuk menentukan jumlah data perhalaman nya, kalo kalian kalian ubah, maka jumlah data nya juga akan berubah..
Membuat pencarian data
Sekarang kita buat modul untuk pencarian datanya..
Pertama didalam view nya kita tambahkan inputan seperti berikut diatas table nya..
....
<div class="row">
<div class="col-md-1">
<select class="form-control" v-model="paging" v-on:change="getData()">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Search" v-model="search" v-on:keyup="getData()">
</div>
</div>
....
Diatas kita menambahkan sebuah inputan baru dengan membinding atribut search, kemudian juga memberikan direktif event on keyup getData(), ini artinya ketika kita tiap kali melakukan penginputan data, akan selalu mengakses method getData()..
Untuk script pada vue nya adalah seperti berikut:
....
<script>
var appVue = new Vue({
el: "#appVue",
data: {
url: '',
data_produk: [],
next_page_url: '',
prev_page_url: '',
paging: '',
search: ''
},
mounted() {
this.paging = 10;
this.url = "{{ url('get-master-product-paging') }}"
this.getData();
},
methods: {
getData: function() {
axios.get(this.url, {
params: {
paging: this.paging,
search: this.search
}
})
.then(resp => {
console.log(resp.data);
this.data_produk = resp.data.data;
this.next_page_url = resp.data.next_page_url;
this.prev_page_url = resp.data.prev_page_url;
})
.catch(err => {
alert('error');
console.log(err);
})
},
gantiHalaman: function(url) {
this.url = url;
this.getData();
}
}
})
</script>
....
Kalian perhatikan script diatas, pada baris ke-14 kita membuat sebuah atribut baru dengan nama search..
Kemudian pada baris ke-27, kita membawa atribut search tersebut sebagai parameter pada axios nya..
Kemudian query di controller nya kita modifikasi seperti berikut:
....
public function get_product_paging()
{
$paging = request('paging');
$search = request('search');
$data = Product::where('business_id', 2)
->when($search, function ($query, $search) {
return $query->where('name', 'like', "%$search%")
->orWhere('sku', 'like', "%$search%");
})
->select(['name', 'sku', 'type'])->orderBy('name')->paginate($paging);
return response()->json($data);
}
....
Pada baris ke-5 kita menarik request search nya..
Kemudian pada baris ke-8 di query eloquent nya, kita menambahkan perintah when, perintah when digunakan untuk menjalankan sebuah kondisi jika nilai pada variable $search nya berisikan nilai, tapi jika null atau kosong maka kondisi tersebut tidak akan dijalankan..
Sekarang kalo kalian refresh halaman nya, maka akan muncul seperti berikut:
Kalo kalian mengetikkan sebuah keyword pada inputan search nya, maka datanya otomatis akan menyesuaikan..
Menampilkan Informasi Jumlah Data
Sekarang ini adalah part terakhir, kita akan menampilkan informasi jumlah data dari data yang sedang ditampilkan, untuk contoh nya adalah seperti pada gambar berikut:
Untuk menapilkan informasi seperti pada gambar diatas itu gampang banget, karena pada laravel pagination nya sendiri sudah menyediakan nya..
Kalo kalian cek kembali hasil response json pagination nya, disana terdapat atribut from, to dan total..
Atribut tersebutlah yang akan dipakai, maka pada kodingan vue nya kita menambahkan atribut baru seperti berikut:
....
<script>
var appVue = new Vue({
el: "#appVue",
data: {
url: '',
data_produk: [],
next_page_url: '',
prev_page_url: '',
paging: '',
search: '',
from: '',
to: '',
total: ''
},
mounted() {
this.paging = 10;
this.url = "{{ url('get-master-product-paging') }}"
this.getData();
},
methods: {
getData: function() {
axios.get(this.url, {
params: {
paging: this.paging,
search: this.search
}
})
.then(resp => {
console.log(resp.data);
this.data_produk = resp.data.data;
this.next_page_url = resp.data.next_page_url;
this.prev_page_url = resp.data.prev_page_url;
this.from = resp.data.from;
this.to = resp.data.to;
this.total = resp.data.total;
})
.catch(err => {
alert('error');
console.log(err);
})
},
gantiHalaman: function(url) {
this.url = url;
this.getData();
}
}
})
</script>
....
Kemudian pada file view nya tinggal kalian tampilkan seperti berikut:
Kalo kalian refresh halaman nya, maka seharusnya dibawah table sudah muncul informasi dari jumlah data yang ditampilkan..
Terima kasih, semoga bermanfaat..
Support Us
Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid
Terima kasih..
[…] Untuk cara pembuatan nya, kalian bisa kunjungi halaman berikut: Panduan lengkap membuat pagination Laravel VueJS.. […]