Cara Membuat Tabel Responsif Dengan jQuery Mobile
Berjumpa kembali dengan saya Hernowo di tips dan trik seputar dunia laman, yang terdapat di Source Code Aplikasi. Kali ini saya akan membahas bagaimana Cara Membuat Tabel Responsif Dengan jQuery Mobile dan kita pun akan mengimplementasikannya. Sebelum memulai saya akan menjelaskan mengenai tabel memiliki tampilan yang dinamis di jQuery Mobile, desain responsif bermanfaat ketika kita ingin konten halaman tampilan mobile apalagi tabel adalah sebuah bagian dari perancangan layout yang biasanya bagi menampilkan data informasi misalkan biodata seseorang. Dan didalam jQuery Mobile ada 2 macam jenis yang dapat kita gunakan yaitu reflow tabel dan Column Toggle Table.
reflow tabel yang artinya posisi data tabel secara horizontal hingga mencapai ukuran minimum, karenanya segala baris dikelompokkan bersama secara vertikal.
Column Toggle Table yang artinya Kolom “beralih” mode will hide kolom ketika tak lumayan lebar bagi menampilkan data di dikala tampilan mobile.
Kesimpulannya yakni kalau table di tampilan desktop karenanya data di pada tabel akan horizontal namun di dikala tampilan mobile data akan di pindahkan secara vertical, dan sama saja dari reflow tabel beralih ke Column Toggle Table.
Bagus, saatnya kita praktekkan Cara Membuat Tabel Responsif Dengan jQuery Mobile, seperti lazim teman – teman siapkan text editornya dan install terlebih dahulu jQuery Mobile nya lalu copy script di bawah ini
<div data-role=page id=pageone>
<div data-role=header>
<h1>Styling Column Toggle Table</h1>
</div>
<div data-role=main class=ui-content>
<table data-role=table class=ui-responsive ui-shadow id=myTable>
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Usia</th>
<th>Tempat tinggal</th>
<th>Kota</th>
<th>Kode Pos</th>
<th>Negara</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>27 tahun</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquería</td>
<td>23 tahun </td>
<td>Mataderos 2312</td>
<td>México D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>30 tahun</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
</tbody>
</table>
</div>
<div data-role=footer>
<h1>Footer Text</h1>
</div>
</div>
Kemudian pastekan di pada tag <body>, berikutnya tambahkan css nya bagi memberikan bordernya
<style>
tr {
border-bottom: 1px solid lightgray;
}
</style>
Seandainya telah, save dan jalankan di browser nya, karenanya tampilan desktop seperti gambar di bawah ini
Seandainya di kecilkan ke ukuran mobile karenanya dengan otomatis data akan di alihkan secara vertical
Dapat teman – teman lihat datanya akan otomatis vertical sesuai nomor urutannya, bagaimana..?? Benar-benar Gampang bukan..??
Sekianlah di tips dan trik kali ini mengenai Cara Membuat Tabel Responsif Dengan jQuery Mobile, kita berjumpa kembali di artikel yang akan datang. Semoga bermanfaat dan menjadi bahan latihan bagi teman – teman yang dikala ini sedang belajar membangun halaman laman khusus tampilan mobile.
Terimakasih dan Hingga Jumpa 🙂
Sumber https://kursuswebsite.org
