Filter Data Pada Datatables ServerSide #5 Menggunakan Yajra Laravel AdminLte

4 min readMar 31, 2020

Pada artikel sebelumnya saya sudah membahas bagaimana melakukan merge column ( menggabungkan kolom ) pada datatables bagi anda yang belum membacanya dapat membacanya disini.

Pada artikel kali ini saya akan membahas bagaimana melakukan filter data pada datatables, fitur filter ini sangat bermanfaat pada aplikasi kita dimana user aplikasi kita ingin menampilkan data yang memiliki kriteria tertentu saja.

Study Case

Pada Study Case kali ini kita ingin melakukan filter data berdasarkan inputan nama product,dropdown satuan product dan priode untuk study case kali ini kita masih tetap menggunakan source code sebelumnya dan kita akan modifikasi dengan menambahkan fitur

Filter By Nama Product
Filter By Nama Satuan
Filter By Nama Periode

Filter menggunakan Text

pertama kita tambahkan dahulu views untuk filter by name product sbb :

<div class="panel-body"> <label for="name"> Filter Berdasarkan Nama Product: </label> <input type="text" name="name" class="form-control col-sm-4 filter-name" placeholder="Filter Berdasarkan Nama Product"> </div>

pada input text di atas kita tambahkan class dengan nama filter-name ( nama ini bebas sesuai keinginan anda memberi nama) maka untuk viewsnya akan tampil sbb :

Setelah itu di tag <script> datatablesnya kita tambahkan sbb :

//filter berdasarkan Nama Product $('.filter-name').keyup(function () { table.column( $(this).data('column')) .search( $(this).val() ) .draw(); });

dimana pada code jquery diatas kita menangkap setiap ada event keyup untuk text dengan nama class filter-name maka kita akan melakukan pencarian sesuai dengan value yang ada pada text dengan class filter-name, dan setelah itu kita refresh datatables dengan draw.

berikut contoh jika kita melakukan search sbb :

Filter Menggunakan dropdown

pertama kita buat dahulu dropdown pada viewsnya sbb :

<label for="filter-satuan"> Filter Berdasarkan Satuan :</label> <select data-column="1" class="form-control col-sm-4 filter-satuan" placeholder="Filter Berdasarkan Satuan Product"> <option value=""> Pilih Satuan Product </option> <option value="kg"> KG </option> <option value="ton"> TON </option> </select>

kita membuat dropdown untuk satuan kg,ton untuk output dari viewsnya sbb :

lalu pada script datatables kita tambahkan code sbb :

//filter Berdasarkan satuan product $('.filter-satuan').change(function () { table.column( $(this).data('column')) .search( $(this).val() ) .draw(); });

pada code diatas kita menggunakan event change sebagai triggersnya dimana setiap ada perubahan satuan product maka kita melakukan pencarian dan hasil pencariannya di tampilkan ke dalam datatables

Filter Berdasarkan Periode

sama dengan cara sebelumnya kita buat dahulu dropdown periodenya pada views sbb :

<label for="filter-periode"> Filter Berdasarkan Periode : </label> <select name="filter_periode" id="filter_periode" class="form-control"> <option value=""> Pilih Periode </option> <option value="7"> 7 Hari Terakhir </option> <option value="14"> 14 Hari Terakhir </option> <option value="21"> 21 Hari Terakhir </option> <option value="31"> 31 Hari Terakhir </option> <option value="365"> 365 Hari Terakhir </option> </select>

output dari views diatas sbb :

lalu pada bagian ajaxnya kita jadikan object sehingga menjadi sbb :

ajax: { "url" : "{{ route ('api.product') }}", "data" : function (d) { d.filter_periode = $('#filter_periode').val(); } }

lalu pada tag script datatables kita tambahkan code sbb :

//filter Berdasarkan periode $('#filter_periode').change(function () { table.draw(); });

dikarenakan filter berdasarkan periode ini melakukan query melalui ajax maka di controller perlu kita lakukan perubahan menjadi sbb :

public function datatables() { $query = Product::select('id','name','satuan','buy_price','sell_price','created_at'); if (request('filter_periode')) { $filter_periode = now()->subDays(request ('filter_periode'))->toDateString(); $query->where('created_at','>=', $filter_periode); } return datatables ($query)->toJson(); }

Query diatas kita mengambil data product dimana nilai dari field created_at nya itu >= $filter_periode.

jika tidak ada error akan tampil sbb :

untuk source code lengkapnya silahkan dowload disini

untuk live demo projectnya silahkan akses disini

Referensi Tambahan :

pada artikel selanjutnya kita akan membahas bagaimana styling css pada datatables agar tampilan datatables menjadi lebih menarik

stay tune ya…!!

Kesimpulan

fitur filter merupakan salah satu fitur wajib yang ada pada aplikasi anda ketika menggunakan datatables, dikarenakan akan sangat mempermudah user di aplikasi anda dalam melakukan pencarian data dan dengan perpaduan laravel dan datatables maka fitur data dapat dengan mudah anda tambahkan.

silahkan share artikel ini agar lebih banyak yang mendapatkan manfaat dari artikel ini…

Salam,

Adinata

Originally published at https://adinata.id on March 31, 2020.