jQuery Mobile (14): Menampilkan Tabel dengan Column Toggle dan Data-Priority

Selanjutnya tambahkan atribut ini data-mode="columntoggle" dan atribut ini data-column-btn-text="On/Off Column" pada tag <table>. Sehingga menjadi begini:

<table data-role="table" class="ui-responsive" data-mode="columntoggle" data-column-btn-text="On/Off Columns">

Simpan dulu, terus lihat tampilannya.

Toggle Columns Button jQuery Mobile

Sudah tampil ya tombolnya? Kalau diklik belum ada apa-apanya. Kita lanjut lagi.

Data-Priority

Supaya ada yang ditampilkan dan column toggle berfungsi, perlu ditambahkan atribut data-priority pada masing-masing judul kolom dari tabel. Letakkan atribut ini di dalam tag <th>, contohnya <th data-priority="angka">.  Ingat, pasang disemua kolom yang ingin dijadikan pilihan dalam toggle button. Jika ada kolom yang tidak ingin dihilangkan dari tampilan, jangan masukkan atribut ini ya.

Value angka pada atribut data-priority ini berfungsi sebagai level prioritas mana yang akan dipertahankan jika ternyata layar terlalu kecil. Maksudnya, kolom yang prioritasnya rendah akan disembunyikan otomatis jika layar yang mengakses kecil.

Semakin kecil nilai angka, maka prioritasnya semakin tinggi, artinya akan menjadi yang sangat dipertahankan keberadaannya. Bingung ya? Kita coba saja ya 😀 Tambahkan atribut seperti di bawah ini pada kode Anda, yaitu pada bagian <thead> sehingga jadi begini kodenya:

<thead>
  <tr>
    <th data-priority="1">No.</th>
    <th>NIM</th>
    <th data-priority="2">Nama</th>
    <th data-priority="3">Prodi</th>
    <th data-priority="6">Angkatan</th>
    <th data-priority="4">Kelas</th>
    <th data-priority="5">Dosen PA</th>
  </tr>
</thead>

Simpan dan coba jalankan filenya. Coba dulu membesarkan dan mengecilkan ukuran layar (jendela browser) perhatikan mana kolom yang hilang dan mana yang tampil? Ayo diperhatikan lagi 😎 Dicoba sendiri ya…

Kalau sudah paham, sekarang klik tombol toggle, ada tampilan tanda centang ka ya? Jika ada tanda centangnya berarti kolom itu ditampilkan, demikian sebaliknya. Lihat gambar tampilan punya saya:

Toggle Columns Show jQuery Mobile Table

Bagaimana? Ada pertanyaan? Silakan tulis di bagian komentar ya. Saya cukupkan dulu bahasan kita, silakan terus dicoba dan dikembangkan lagi. Ketemu di tutorial yang lain ya… Salam…

← Sebelumnya

Halaman : 1 2 3

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *