Membuat Responsive Datatables dengan Automatic Column Hiding

2 226

Datatables yang responsif memungkinkan penyembunyian kolom otomatis berdasarkan ukuran area pandang. Responsivitas dapat ditambahkan dengan menentukan class = ‘responsive’ dalam HTML atau dengan menetapkan opsi responsif sebagai true saat menginisialisasi Datatable. Penyembunyian kolom otomatis akan terjadi dari kanan secara default. Artinya, kolom paling kanan akan disembunyikan saat lebar viewport semakin kecil. Kita juga dapat menyesuaikan untuk menyembunyikan kolom tertentu dengan menentukan prioritas responsif saat menginisialisasi Datatables. Kita juga bisa menggunakan data atribut data HTML5 prioritas untuk menentukan prioritas kustom ke kolom.

Dalam tutorial ini, saya telah menambahkan contoh untuk Datatables responsif untuk menyesuaikan prioritas kolom agar kolom otomatis tersembunyi. Contoh-contoh ini digunakan untuk melihat bagaimana mendefinisikan prioritas kolom dengan menggunakan opsi columnDef pada saat inisialisasi dan dengan menggunakan atribut data-prioritas HTML5. Dalam tutorial sebelumnya, kita telah melihat bagaimana menghitung total kolom-wise menggunakan panggilan balik Datatables Footer.

Inisialisasi Datatable dengan Prioritas Kolom Responsif

Dalam contoh ini, saya menggunakan properti columnDef untuk menentukan prioritas responsif pada kolom Datatable. Saat menginisialisasi Datatables, saya menentukan prioritas dan indeks target kolom. Skrip berikut menunjukkan bagaimana cara menginisialisasi Datasing dengan kolom otomatis yang disembunyikan dengan menetapkan responsif sebagai prioritas kolom yang benar dan menentukan. Dalam contoh ini, ada lima kolom First Name, Last Name, Address, Phone dan DOB. Saya menetapkan prioritas 1 dan 2 ke kolom First Name dan DOB masing-masing. Jadi, bila ukuran viewport kecil maka kolom akan disembunyikan secara otomatis berdasarkan set prioritas ke kolom.

<script>
$(document).ready(function() {
    $('#contact-detail').dataTable({
		"responsive": true,
		"columnDefs": [
		            { responsivePriority: 1, targets: 0 },
		            { responsivePriority: 2, targets: 4 }
		        ]
    } );
} );
</script>

Output

Berikut screenshot menunjukkan output dari contoh ini.

Menyesuaikan Prioritas Kolom menggunakan Atribut Data HTML5

Dalam contoh ini, saya menggunakan prioritas data HTML5 untuk menentukan prioritas kolom dengan HTML Datatable. Dalam kode ini, saya telah menambahkan class = responsif untuk membiarkan Datasing menjadi responsif di area pandang yang lebih kecil. Saya menetapkan dua kolom terakhir Telepon dan DOB dengan prioritas 1 dan 2 masing-masing.

<table id="contact-detail" class="responsive display nowrap" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Address</th>
			<th data-priority="1">Phone</th>
			<th data-priority="2">DOB</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td>Barry</td>
			<td>Allen</td>
			<td>Florida</td>
			<td>2211335566</td>
			<td>02-02-1983</td>
		</tr>
		...
		...
		...
		<tr>
			<td>Tony</td>
			<td>Stark</td>
			<td>Texas</td>
			<td>8899886655</td>
			<td>05-10-1984</td>
		</tr>
	</tbody>
</table>
Demo

Get real time updates directly on you device, subscribe now.

2 Comments
  1. majid says

    min saya mau download ko gak bisa ya tombol likenya error katanya ads diblock udah saya sudah buka di permission google ads nya dan saya gak masang exstensi ataupun antivirus min, gimana ya?

    1. Infokoding says

      Pastikan sudah like us facebook infokoding melalui button tersebut, setelah like button download akan muncul.
      Terima kasih sudah mengunjungi situs infokoding.com

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.