Hallo sahabat dumenity berjumpa lagi dalam tutorial¬†kursuswebdesign,¬†pada tutorial kali ini saya akan membahas tentang Membuat Responsive Datatables Secara Otomatis. Data yang responsif memungkinkan penyembunyian kolom otomatis berdasarkan ukuran viewport. Respons dapat ditambahkan dengan menetapkan class = ‘responsif’ dalam HTML atau dengan mengatur opsi responsif sebagai true ketika menginisialisasi Datatable. Penyembunyian kolom otomatis akan terjadi dari kanan secara default. Artinya, kolom paling kanan akan disembunyikan ketika lebar viewport semakin kecil. saya juga dapat menyesuaikan untuk menyembunyikan kolom tertentu dengan menentukan prioritas responsif saat memulai Datatables. Kita juga dapat menggunakan prioritas data atribut data HTML5 untuk menentukan prioritas khusus ke kolom.

Dalam tutorial ini, saya telah menambahkan contoh untuk Datatables responsif untuk menyesuaikan prioritas kolom untuk penyembunyian kolom otomatis. Contoh-contoh ini digunakan untuk melihat bagaimana mendefinisikan prioritas kolom dengan menggunakan opsi columnDef pada saat inisialisasi dan dengan menggunakan atribut prioritas data HTML5.

Menginisialisasi Datatable dengan Prioritas Kolom Responsif

Dalam contoh ini, saya menggunakan properti columnDef untuk menentukan prioritas responsif ke kolom Datatable. Saat menginisialisasi Datatables, saya menetapkan prioritas dan indeks target dari kolom. Skrip berikut menunjukkan cara menginisialisasi Datatable dengan kolom otomatis yang disembunyikan dengan menyetel responsif sebagai prioritas kolom yang benar dan menentukan. Dalam contoh ini, ia memiliki lima kolom Nama Depan, Nama Belakang, Alamat, Telepon, dan DOB. Saya menetapkan prioritas 1 dan 2 ke kolom Nama Depan dan DOB masing-masing. Jadi, ketika ukuran viewport kecil maka kolom akan disembunyikan secara otomatis berdasarkan prioritas yang ditetapkan ke kolom.

Kustomisasi Prioritas Kolom menggunakan HTML5 Atribut Data

Dalam contoh ini, saya menggunakan prioritas data HTML5 untuk menentukan prioritas kolom dengan HTML Datatable. Dalam kode ini, saya telah menambahkan kelas = responsif untuk membiarkan Datatable menjadi responsif dalam viewport yang lebih kecil. Saya menetapkan dua kolom terakhir Phone dan DOB dengan prioritas 1 dan 2 masing-masing.

Oke itulah tadi pembahasan saya tentang Membuat Responsive Datatables Secara Otomatis semoga bermanfaat. Untuk melihat hasilnya silahkan coba langsung terima kasih.