Tutorial Laravel dengan Datatables Part I

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 tadi
• processing: true, ini menampilkan gif animation processing nya
• serverSide: 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 buku
• columns: [ 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
• orderable: false, jika kita false ini kolom pilihan tidak akan bisa kita order
• searchable: 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 <--