Halo sob, lumayan lama saya sudah engga nulis lagi nih :D sebelumnya saya mau minta maaf untuk semua pembaca gilacoding karena saya lama tidak update dan untuk yang menawarkan kerja sama ke email pribadi saya langsung saja ya di herziwp@gmail.com
Okay, sekarang saya akan membahas mengenai Datatables pada Laravel, hmmm udah pada tau mengenai datatables atau belum? Kalau belum silahkan cari tau dulu di website resmi langsung disini lalu karena kita akan menerapkan nya pada laravel jadi saya menggunakan package yang di khususkan untuk laravel nih yaitu yajra-datatables.
Jika ingin belajar datatables lebih dalam silahkan langsung ke website yajra-datatables nya langsung ya sob karena disini saya akan membahas cara menggunakan / penerapan dasar nya saja yang sering terpakai
Bahan nya yang harus disiapkan nih :
- Project laravel sobat yang sudah terkoneksi dengan table tentunya (Saya masih pake Laravel 5.2 ya)
- Package yajra-datatables nya (nanti dikasih tau cara install nya)
- Ini Css dan Js datatables nya download disini <- Klik
- Koneksi internet (buat download package)
- Komputer / Laptop (pastikan komputer nya udah menyala ya)
Perkiraan waktu pengerjaan :
- 10 - 20 menit ( tergantung kalo ga ada error )
Udah kaya masak aja jadinya hahaha udah ah langsung saja nih pertama saya tampilkan dulu contoh project saya yang sudah siap buat di praktekin ke Datatables :
Ini adalah index.blade.php
saya,
Note :
- Project sobat harus lengkap dengan
controllernya, model, dan view
nya harus sudah siap ya
Sekali lagi saya tegaskan ya sob, disini saya tidak membahas mengenai Cara membuat model, controller, view
dll hanya langsung ke cara menggabungkan Datatables nya dengan Laravel saja.
Jadi jika sobat masih belum paham, silahkan dibaca dulu pertahap tutorial – tutorial sebelumnya.
Pertama – tama kita install dulu yajra-datatables
nya, dengan cara buka command prompt nya di Path Laravel sobat, klik kanan pada command promptnya lalu pastekan command line ini :
composer require yajra/laravel-datatables-oracle:~6.0
Tinggal enter, hasilnya gini :
Ket :
- Perlu koneksi internet (wajib)
- Pastikan sudah terinstall dengan benar, tidak ada yang failed (wajib)
- Kopi / Minuman biar engga ngantuk (engga wajib)
Lanjut, jika sudah lalu langkah selanjutnya paste script ini di config\app.php
dibagian providers
ya :
Yajra\Datatables\DatatablesServiceProvider::class
Dan ini masih di config\app.php
tapi dibagian aliases
:
'Datatables' => Yajra\Datatables\Facades\Datatables::class,
Lalu kita publish
, klik kanan pada commandprompt lalu paste lagi commandline berikut :
php artisan vendor:publish --tag=datatables
Yaa kita sudah selesai instalasi package Datatables nya, langsung kita lanjut lagi cara menggunakan datatables pada view table yang sudah kita siapkan tadi ya pastikan sudah terkoneksi dengan database sob
Pertama pastikan kita sudah memanggil css dan js nya datatables ya sob, kalau belum silahkan download disini, dan taroh di folder public nya Laravel. Lalu sesuaikan lokasi css/js nya
Lanjut ke Controller
masing – masing ya sob, disini nama controller
saya yaitu DatatablesController
Panggil use Datatables
nya seperti ini :
use Yajra\Datatables\Datatables;
Lalu buat method
baru dengan nama dataBuku()
isi nya gini :
public function dataBuku()
{
return Datatables::of(Buku::query())->make(true);
}
Keseluruhan Controller
nya :
Lalu kembali ke index.blade.php
atau ke view
table yang mau kita buat menjadi datatables
Tambahkan element id
didalam tag table contoh :
Terserah saja mau id
nya apa, nanti id
pada table ini akan kita gunakan untuk javascriptnya datatables
Lalu kita ke bagian javascript, pastekan script berikut ke bagian bawah nya pemanggilan datatables ya, jangan sampai mempaste nya diatas script pemanggilan datatables nanti tidak akan jalan.
<script type="text/javascript">
$(function() {
var oTable = $('#table-buku').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '{{ url("data-buku") }}'
},
columns: [
{data: 'id_buku', name: 'id_buku'},
{data: 'judul', name: 'judul'},
{data: 'penulis', name: 'penulis'},
{data: 'deskripsi', name: 'deskripsi', orderable: false},
{data: 'kategori', name: 'kategori', orderable: false, searchable: false},
],
});
});
</script>
Ket :
var oTable = $('#table-buku')
, pastikan id nya sama dengan id kita pada table tadiprocessing: true
, ini menampilkan gif animation processing nyaserverSide: true
, menampilkan data dari database dengan serverside artinya tidak sekaligus semua data dari database terload ,ajax: { url: '{{ url("data-buku") }}' }
, ini url yang sudah kita buat untuk menampilkan data bukucolumns: [ data: 'id_buku', name: 'id_buku'} ]
, sesuaikan jumlah data nya dengan yang ingin kita tampilkan, misal tadi pada table jumlah<th></th>
atau kolom yang ingin kita tampilkan ada 5 maka jumlah column pada script datatable kita juga isi nya harus 5.- Maksud dari
data: ‘id_buku’
ini harus sama dengan yang didatabase - Sedangkan
name: ‘ id_buku’
ini untuk name nya saja
- Maksud dari
orderable: false
, jika kita false ini kolom pilihan tidak akan bisa kita ordersearchable: false
, kalau ini kita false maka saat kita search kata kunci dikolom juga tidak masuk dalam kategori pencarian
Sekarang kita ke routes.php
ya, tambahkan url pada datatables kita tadi yaitu data-buku
Method nya dataBuku
pada DatatablesController
yang sudah saya buat :
Jika sudah sekarang coba kita jalankan, dan hasilnya :
Pada kolom deskripsi dan kategori tidak ada tanda panah atas/bawah , karena orderable
nya tadi kita false untuk menampilkan nya silahkan di true
atau dihapus orderablenya. Silahkan kalian coba hasilnya sob
Sekian tutorial Menggabungkan Datatables dengan Laravel Part I nya, Mohon maaf jika saya terdapat salah kata ya sob. Ditunggu untuk Part – Part Datatables selanjutnya!
Jika ada yang kurang jelas / ada yang ingin ditanyakan silahkan di Tanyakan di bawaah. Terimakasih :D
Ohya ini project saya tadi silahkan didownload datatables part I nya --> Disini <--