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.

1. Follow instagram penulis: @ad1nata.id
Kunjungi Blog Resmi Penulis : www.adinata.id

2. March 31,
2020
Filter Data Pada Datatables ServerSide #5 Menggunakan
Yajra Laravel AdminLte
adinata.id/laravel/filter-data-pada-datatables-serverside-5-menggunakan-yajra-laravel-adminlte/
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 :
1/7

3. <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 :
2/7

4. 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 :
3/7

5. 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 :
4/7

6. 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 :
5/7

7. 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 :
Carbon untuk handle datetime silahkan baca disini
Dokumentasi Datatables silahkan baca disini
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.
6/7

8. silahkan share artikel ini agar lebih banyak yang mendapatkan manfaat dari artikel ini…
follow akun instagram saya :
Follow ad1nata.id
Salam,
Adinata
7/7