Cara Menambahkan Warna Latar Belakang ke Kolom Tabel Data – Panel Admin Cepat

Tabel data sangat berguna untuk membuat daftar data, namun menambahkan beberapa warna akan membantu pengguna memfilter data secara visual dengan lebih baik. Salah satu contoh paling umum adalah melihat status rekaman, dengan beberapa warna latar belakang. Artikel ini akan menunjukkan caranya.

Contoh ini akan didasarkan pada dua Tabel data dihasilkan dengan QuickAdminPanel kami, tetapi Anda tidak perlu menggunakan alat kami, alat tersebut harus dapat diterapkan pada implementasi Datatables.net apa pun dengan Laravel.

---

Kasus 1. Datatable non-AJAX sederhana

Jika Anda memiliki

sederhana tanpa rendering sisi server, solusinya cukup sederhana.

1. Konfigurasikan warna di Model

Berikut contohnya aplikasi/Proyek.php (lihat file lengkap):

class Project extends Model
{
    const STATUS_COLOR = [
        'pending'  => '#FFFF99',
        'active'   => '#90EE90',
        'archived' => '#00BFFF',
    ];

    // ... other Model properties

2. Masukkan warna latar sebagai CSS di dalam sel

Dalam tabel, misalnya, sumber daya/tampilan/admin/proyek/index.blade.php (lihat file lengkap):

<td style="background-color: {{ App\Project::STATUS_COLOR[$project->status] ?? 'none' }};">

---

Kasus 2. Tabel Data Sisi Server AJAX

Untuk jumlah data yang lebih besar, Anda pasti akan menggunakan AJAX Datatables. Bagaimana cara menambahkan warna di sana?

Versi singkat: Lihat kode di sini.

Rahasianya adalah menambahkan kolom warna “tersembunyi” dan kemudian menggunakan nilainya di kolom status sebenarnya.

Jadi mari kita ambil contoh lain.
Kami menambahkan konfigurasi warna yang sama app/Pelanggan.php model (lihat file lengkap):

class Customer extends Model
{
    const STATUS_COLOR = [
        'pending'  => '#FFFF99',
        'active'   => '#90EE90',
        'archived' => '#00BFFF',
    ];
    
    // ... other model properties

Selanjutnya, kita sampai ke Pengendali.

app/Http/Controller/Admin/CustomersController.php (lihat file lengkap):

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

// ... other columns

// New "hidden" column
$table->addColumn('status_color', ' ');

// ... other columns

// We add "status_color" value but it won't be visible
$table->editColumn('status_color', function ($row) {
    return $row->status && Customer::STATUS_COLOR[$row->status] ? Customer::STATUS_COLOR[$row->status] : 'none';
});

return $table->make(true);

Terakhir, kami menentukan nilai kolom “status”.
Ini dia sumber daya/tampilan/admin/pelanggan/index.blade.php (lihat file lengkap):

// our Datatables settings object
let dtOverrideGlobals = {
    processing: true,
    serverSide: true,
    retrieve: true,
    aaSorting: [],
    ajax: "{{ route('admin.customers.index') }}",

    // So in the columns we don't show "status_color"
    columns: [ 
	{ data: 'placeholder', name: 'placeholder' },
	{ data: 'id', name: 'id' },
	{ data: 'name', name: 'name' },
	{ data: 'status', name: 'status' },
	{ data: 'actions', name: '{{ trans('global.actions') }}' }
    ],

    // ... other Datatable properties

    // But we do have value, so we can add CSS from data.status_color value
    createdRow: (row, data, dataIndex, cells) => {
        $(cells[3]).css('background-color', data.status_color)
    }
};

$('.datatable-Customer').DataTable(dtOverrideGlobals);

---

Dan itu dia! Lihat repositori lengkap: LaravelDaily/Laravel-Datatables-Column-Colors

News
Berita
News Flash
Blog
Technology
Sports
Sport
Football
Tips
Finance
Berita Terkini
Berita Terbaru
Berita Kekinian
News
Berita Terkini
Olahraga
Pasang Internet Myrepublic
Jasa Import China
Jasa Import Door to Door

Gaming center adalah sebuah tempat atau fasilitas yang menyediakan berbagai perangkat dan layanan untuk bermain video game, baik di PC, konsol, maupun mesin arcade. Gaming center ini bisa dikunjungi oleh siapa saja yang ingin bermain game secara individu atau bersama teman-teman. Beberapa gaming center juga sering digunakan sebagai lokasi turnamen game atau esports.