Menambahkan Scope dan Ajax Filter di Laravel Datatables dari Yajra

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...