Sel Multi-Baris dengan Gambar – Panel Admin Cepat

Ketika kami mengatakan Datatables, kami kebanyakan berasumsi bahwa itu adalah tabel dengan data. Data berbasis teks – seperti nama, email, deskripsi, dan tombol untuk mengedit/menghapus. Namun kenyataannya, akan lebih mudah jika memiliki data yang lebih kompleks dalam satu sel. Mari kita lihat cara membangunnya.

Ini adalah contoh Datatable yang khas:

Langkah selanjutnya – kita akan menambahkan kolom Foto:

Dan terakhir, kita akan menambahkan kolom dengan data multi-baris dan ikon lencana:

Jadi, mari kita membangunnya selangkah demi selangkah, dan di akhir artikel Anda akan mendapatkan tautan ke repositori Github.

---

Kode Tabel Data Sederhana

Di dalam generator QuickAdminPanel kami, kami memiliki modul AJAX Datatables yang menggunakan paket Laravel Yajra Datatables.

Jadi di EmployeeController, kita punya ini:

// ... more uses
use Yajra\DataTables\Facades\DataTables;

class EmployeesController extends Controller
{
    public function index(Request $request)
    {
        $query = Employee::with(['badges'])->select(sprintf('%s.*', (new Employee)->table));
        $table = Datatables::of($query);

        // Column for View/Edit/Delete buttons
        $table->addColumn('actions', ' ');
        $table->editColumn('actions', function ($row) {
            return view('partials.datatablesActions', compact('row'));
        });
        $table->rawColumns(['actions']);

        return $table->make(true);
    }
}

Lalu, ini dia sumber daya/tampilan/karyawan/index.blade.php:

<table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-Employee">
    <thead>
        <tr>
            <th width="10">

            </th>
            <th>
                ID
            </th>
            <th>
                Name
            </th>
            <th>
                 
            </th>
        </tr>
    </thead>
</table>

<script>
$(function () {
    let dtOverrideGlobals = {
        processing: true,
        serverSide: true,
        retrieve: true,
        ajax: "{{ route('admin.employees.index') }}",
            columns: [
                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'actions', name: 'actions' }
            ],
            order: [[ 1, 'desc' ]],
            pageLength: 100,
    };
    $('.datatable-Employee').DataTable(dtOverrideGlobals);
});
</script>

Melihat: kenyataannya, kodenya sedikit lebih rumit, saya melewatkan beberapa bagian yang tidak relevan untuk tutorial ini.

---

Peningkatan 1. Menambahkan kolom “Foto”.

Untuk menambahkan field foto, di file Blade kita cukup menambahkannya sebagai kolom biasa:

<table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-Employee">
...
            <th>
                Name
            </th>
            <th>
                Photo
            </th>
...
</table>

<script>
$(function () {
...
            columns: [
                { data: 'name', name: 'name' },
                { data: 'photo', name: 'photo', sortable: false, searchable: false }
...
});
</script>

Perhatikan bagaimana saya menambahkan dua parameter lagi di kolom:
– dapat diurutkan: salah
– dapat dicari: salah

Alasannya sederhana – kita tidak boleh menggunakan fitur pencarian atau pengurutan Datatable untuk kolom foto, karena itu akan menjadi kode HTML.

Sekarang, di Controller kita cukup memanipulasi kolom ini dengan $tabel->editKolom() metode – dan dari situ kita dapat mengembalikan kode HTML apa pun yang kita inginkan.

Dalam kasus kami, kami memiliki hubungan antara Karyawan dan Foto (lihat bagaimana QuickAdminPanel menangani unggahan file/foto), dalam kasus Anda mungkin logikanya berbeda. Kodenya adalah ini:

class EmployeesController extends Controller
{
    public function index(Request $request)
    {
        // ...

        $table = Datatables::of($query);

        // ...

        $table->editColumn('photo', function ($row) {
            if ($photo = $row->photo) {
                return sprintf(
                    '<a href=" target="_blank"><img src=" width="50px" height="50px"></a>',
                    $photo->url,
                    $photo->thumbnail
                );
            }

            return '';
        });

       return $table->make(true);
    }
}

Dan itu saja, kami memiliki kolom foto!

---

Tingkatkan 2. Kolom Multi-baris dengan Lencana

Bagaimana jika kita memiliki karyawan posisi dan juga karyawan lencana sebagai hubungan banyak-ke-banyak, dan ingin menunjukkan semuanya pada kolom yang sama di bawah Nama?

Jadi, dalam kasus ini, kami mengedit kolom dari sisi front-end, hanya di indeks Blade, dengan memberikan Metode JavaScript:

$(function () {
...
    columns: [
        { data: 'name', name: 'name' },
        {
            data: null,
            name: 'name',
            render: data => {
                let badges = "";
                data.badges.forEach(badge => {
                    badges += '<img class="mr-1" src="'+badge.icon.thumbnail+'" alt="'+badge.name+'">'
                });

                return data.name+'<br><small>'+data.position+'</small><br>'+badges;
            }
        },
        { data: 'photo', name: 'photo', sortable: false, searchable: false }
...
});

Ya!

---

Kesimpulan: Render di Back-end atau Front-end?

Dalam contoh ini, saya telah menunjukkan dua cara untuk menyesuaikan kolom di AJAX Datatable – dengan mengedit logika back-end di Controller, atau dengan mengedit logika front-end di JavaScript.

Bagaimana cara mengetahui mana yang akan digunakan?

Ini cukup sederhana: jika Anda memerlukan logika yang lebih rumit untuk menghitung data, maka data tersebut harus ada di Controller.
Sebaliknya, jika hanya merender dengan data yang sudah Anda miliki, maka data tersebut harus dalam JavaScript.

Repositori lengkap untuk proyek ini: LaravelDaily/Laravel-Datatables-Customize-Cells