Laravel-datatables: Menggunakan Filter Kustom di Datatable sebagai Implementasi layanan

Biarkan saya mencoba jika saya bisa menjelaskannya untuk Anda.

Di kelas Layanan DT Anda, Anda memiliki metode ajax() yang menangani respons ajax json ke sisi klien. Ini adalah tempat di mana Anda mengubah respons json Anda dengan mengedit / menambahkan kolom, dll ...

Metode lainnya adalah metode query() yang menangani kueri dasar Anda untuk digunakan oleh DT. Kelas memiliki metode request() yang dapat Anda gunakan untuk mengakses instance Request . Lihat cuplikan contoh di bawah ini:

    public function ajax()
    {
        return $this->datatables
            ->eloquent($this->query())
            ->addColumn('action', 'audits.audit.datatables.action')
            ->make(true);
    }

    public function query()
    {
        $audits = Audit::query();

        if ($this->request()->get('auditType')) {
            $audits->where('type', $this->request()->get('auditType'));
        }

        return $this->applyScopes($audits);
    }

Semoga ini membantu. Akan mencoba menambahkan lebih banyak demo tentang implementasi layanan segera.

Terima kasih. Saya mendapat bagian ini. Bisakah Anda memberi tahu saya cara mengirim data ajax dari klien dan kemudian menggambar ulang tabel?

Hubungkan js Anda pada preXHR acara DT untuk meneruskan data khusus ke server. https://datatables.net/reference/event/preXhr

Sekarang filter kustom berfungsi tetapi paginasi tidak berfungsi dengannya.

Terima kasih, saya sudah menyelesaikannya.

Hai Dapatkah saya melihat contoh ???

Lihat potongan kode di atas oleh @yajra. Atau jika Anda mencari cuplikan JavaScript, beri tahu saya.

dalam contoh Request di atas dengan 'auditType' - dari mana asalnya? pedang? dapatkah itu diposting dari pengontrol?

Dari Javascript, berikut ini contoh kode:

$ ('# dataTableBuilder')
.on ('preXhr.dt', function (e, settings, data) {
data.auditType = $ ('input [name = auditType'). val ();
});

<input type="text" onchange="abc(this.value)" >

    function abc(a) {
        $('.datatable')
        .on('preXhr.dt', function ( e, settings, data ) {
            data.auditType = a;
        });
    }

Pak, saya juga menggunakan layanan datatable, mengapa saya tidak dapat memuat data setelah onchange ..

Hai, saya melakukan hal berikut: saya menangkap acara perubahan dan klik tombol muat ulang di datatable, seperti ini:

$ (selector) .on ('change', function () {
$ ('. buttons-reload'). click ();
});

Saya tidak begitu yakin ini cara yang benar untuk memperbarui tabel, tetapi berhasil.

Hai, bisa bantu saya? Siapa yang mengajukan permintaan dalam kasus ini.
Pandangan saya:
<input type="text" name="abc"> <div class="col-md-12"> {!! $dataTable->table(['style'=>'width:100%', 'class'=>'table table-striped table-hover']) !!} </div>
ClientsDataTable:
`
kueri fungsi publik ()
{
$ workstation_id = Auth :: user () -> activeWorkstation () -> id;

    $clients = Client::where('workstation_id', $workstation_id)->with('addresses')->with('devices');

    if ($this->request()->get('abc')) {
        $clients->where('name', $this->request()->get('abc'));
    }


    return $this->applyScopes($clients);
}

JS:

$('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) {
    data.abc= $('input[name=abc]').val();
});

`

Tolong bantu, saya tidak tahu siapa yang seharusnya mengirim permintaan.

Datatable membuat permintaan setiap kali Anda mengubah nilai pada filter kustom Anda.

Anda perlu menangkap perubahan, keyup atau peristiwa keydown pada input, seperti:
$(selector).on('change',function(){ $('.buttons-reload').click(); });

Tombol-muat ulang adalah tombol yang Anda konfigurasikan pada kelas yang dapat diakses data:
public function html() { return $this->builder() ->columns($this->getColumns()) ->addAction(['width' => '35%']) ->parameters([ 'language' => [ 'url' => '//cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json' ], "lengthMenu" => [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], "pagingType" => "full_numbers", 'dom' => 'lBfrtip', 'scrollX' => true, **'buttons' => [ 'reload' ],** ]); }

Jadi, ketika Anda menekan tombol pada input, dan menangkap event tersebut, tombol reload datatable diklik, kemudian memprovokasi permintaan, kelas datatable menangkap nilai input dan berlaku untuk query yang perlu anda jalankan.

Ini berhasil untuk saya, tetapi mungkin merupakan cara yang lebih baik untuk membuatnya berhasil.

Hai,
Itu memang memuat ulang kueri, tetapi tanpa data yang lewat. Ada saran?

Berhasil!!! Maaf, saya lupa menambahkan preXhr.dt pada acara 'on change' seperti ini:
$('input[name=abc]').on('change',function(){ $('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) { data.abc= $('input[name=abc]').val(); }); $('.buttons-reload').click(); });

Saya hanya akan meninggalkan ini di sini untuk siapa saja yang tertarik;)

Javascript

$(document).ready(function () {
    $('.js-datatable-filter-form :input').on('change', function (e) {
        window.LaravelDataTables["dataTableBuilder"].draw();
    });

    $('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) {
        $('.js-datatable-filter-form :input').each(function () {
            data[$(this).prop('name')] = $(this).val();
        });
    });
});

Data filter tambahan dapat diambil melalui fungsi request() . Menggunakan ruang lingkup, hasil dapat disaring di back-end.

Contoh cakupan:

Cakupan yang diarsipkan

<?php namespace App\DataTables\Scopes;

use Yajra\Datatables\Contracts\DataTableScopeContract;

class ArchivedScope implements DataTableScopeContract
{
    public function apply($query)
    {
        $query->onlyTrashed();

        return $query;
    }
}

Contoh metode pengontrol:

public function archived(UserDataTable $dataTable)
{
    $dataTable->addScope(new App\DataTables\Scopes\ArchivedScope());

    return $dataTable->render('admin.users.index');
}

Lingkup peran

Perhatikan fungsi request() dalam metode apply sini.

<?php namespace App\DataTables\Scopes;

use Yajra\Datatables\Contracts\DataTableScopeContract;

class RoleScope implements DataTableScopeContract
{
    public function apply($query)
    {
        if ($roleId = request('role_id')) {
            $query->where('role_id', $roleId);
        }

        return $query;
    }
}

Informasi lebih lanjut tentang cakupan dapat ditemukan di sini: https://datatables.yajrabox.com/services/scope