Iman Sugirman

Fullstack Developer Experience 6 years, using Laravel and ReactJs

Menambahkan Scope dan Ajax Filter di Laravel Datatables dari Yajra

23 February 2022
Menambahkan Scope dan Ajax Filter di Laravel Datatables dari Yajra
Cloud Server Untuk Laravel
Dapatkan Gratis $100 Untuk Deploy Laravel
Deploy Now

Pada tutorial sebelumnya kita membahas tentang Menggunakan Datatables dengan Link artikel Menggunakan Laravel Datatables dari Yajra silahkan anda bisa lihat dan pelajari dan sekarang kita akan menambahkan fitur Datatables Filter lebih dalam menggunakan Scope Datatables bagaimana caranya?

Ikuti tutorial ini sampai selesai sehingga anda bisa memahami Datatables Filter menggunakan Service Implementation.

Membuat Scope Class Dari Yajra

Masukan perintah untuk membuat Scope dan akan dibuat otomatis di folder App\Datatables\Scopes :

php artisan datatables:scope UserScope

Lalu buka dan edit file UserScope.php

<?php namespace App\DataTables\Scopes; use Yajra\DataTables\Contracts\DataTableScope; class UserScope implements DataTableScope { public function apply($query) { // return $query->where('id', 1); } }

Asumsi disini kita sudah membuat User dengan Enum Status atau Dengan boolean dengan nilai 1 dan 0 sehingga menghasilkan 2 variable.

Ubah dengan text editor anda menjadi :

<?php namespace App\DataTables\Scopes; use Illuminate\Http\Request; use Yajra\DataTables\Contracts\DataTableScope; class UserScope implements DataTableScope { protected $request; // Tambahkan Class Request public function __construct(Request $request) { $this->request = $request; } public function apply($query) { // Field mana saja yang ingin di filter kasus disini akan memfilter `status` user $filters = [ 'status', ]; // Untuk Lebih variatif nantinya kita akan buat dinamis seperti ini foreach ($filters as $field) { if ($this->request->has($field)) { if($this->request->get($field) !== null){ $query->where($field, '=', $this->request->get($field)); } } } return $query; } }

Sekarang kita akan kembali mengedit UserController yang dibuat sebelumnya. Jika anda tidak tahu caranya maka bisa pelajari di artikel Menggunakan Laravel Datatables dari Yajra

Tambahkan Scope yang kita tadi buat dengan nama UserScope seperti ini :

->addScope(new UserScope($request))

Sehingga akan menjadi seperti ini untuk UserController yang anda buat :

<?php namespace App\Http\Controllers\General; use App\DataTables\UserDataTable; use App\DataTables\Scopes\UserScope; use App\Http\Controllers\Controller; use App\Models\User; use Illuminate\Http\Request; class UserController extends Controller { // Tambahkan Request Class untuk menggunakannya nanti di scope public function index(UserDataTable $datatables, Request $request) { // Tambahkan addScope return $datatables->addScope(new UserScope($request))->render('users.index'); } ...

Oke di Controller sudah berhasil mengkoneksikan antara UserController dan UserScope saatnya merubah di bagian UserDatatables

Ubah UserDatatables dibagian minifiedAjax() dengan ini :

public function html() { return $this->builder() ... ->minifiedAjax()

Dan ubah menjadi

->ajax([ 'url' => route('users.index'), 'type' => 'GET', 'data' => "function(data){ _token = '{{ csrf_token() }}', data.status = $('select[name=status]').val(); ... }" ])

Setelah memberikan parameter dengan ajax maka selanjutnya kita akan mengubah di sisi view users yang tadi kita buat dengan menambahkan script :

$(document).ready(function () { var reqTable = $('.table').DataTable(); $('#search-filter').on('submit', function (e) { reqTable.draw(); e.preventDefault(); }); });

dan tidak lupa untuk di bagian atas / filternya nanti diberikan button :

<div class="col-2"> <label for="status">Select Status</label> <select name="status" id="status" class="status form-control show-tick show-menu-arrow"> <option value="">Select Status</option> <option value="1">Aktif</option> <option value="0">Non Aktif</option> ... </select> </div> <div class="col-2"> <label for="status"></label> <div class="form-group mt-2"> <button type="submit" class="btn btn-success">Filter</button> </div> </div>

Demikian artikel tentang Menambahkan Scope dan Ajax Filter di Laravel Datatables dari Yajra lanjutan dari artikel Sebelumnya

happy coding...

Cloud Server Untuk Laravel
Dapatkan Gratis $100 Untuk Deploy Laravel
Deploy Now
Subscribe to our newsletter!
Dapatkan Tutorial terbaru dari saya dikirim ke email anda...