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

Salaam ‘alaikum… Kita bahas lagi tentang jQuery Mobile, oke? Oke ga oke tetap kita bahas pokoknya 😆

Tulisan kali ini tidak terkait langsung tulisan lain yang berbau jQuery Mobile. Tetapi ada hubungannya dengan tulisan tentang HTML, yaitu cara untuk membuat tabel. Ya kita akan bahas bagaimana membuat tabel di jQuery Mobile dan memilih kolom apa saja yang akan ditampilkan.

Seperti biasa, silakan save-as dulu salah satu file latihan Anda sebelumnya. Kemudian beri nama dengan jqm_table_responsive.html. Konsepnya adalah kita buat halaman untuk menampilkan data dalam bentuk tabel dulu secara standar. Ayo sesuaikan kodenya sehingga jadi seperti berikut:

<html>
<head>
  <title>Table Responsive</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  <script src="jquery-1.11.1.min.js"></script>
  <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <header data-role="header" data-position="fixed">
    <h1>Tabel</h1>
  </header>

  <div data-role="content" class="ui-content">
    <p>Menampilkan data dalam bentuk tabel</p>
    <table data-role="table" class="ui-responsive">
      <thead>
        <tr>
          <th>No.</th>
          <th>NIM</th>
          <th>Nama</th>
          <th>Prodi</th>
          <th>Angkatan</th>
          <th>Kelas</th>
          <th>Dosen PA</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>C13001</td>
          <td>Maria Murya</td>
          <td>SI</td>
          <td>2013</td>
          <td>A</td>
          <td>Yosef Hadi</td>
        </tr>
        <tr>
          <td>2</td>
          <td>C13087</td>
          <td>Steve Ready</td>
          <td>TI</td>
          <td>2013</td>
          <td>A</td>
          <td>Kemal Pasha</td>
        </tr>
        <tr>
          <td>3</td>
          <td>C14099</td>
          <td>Joni Fransisco</td>
          <td>TI</td>
          <td>2014</td>
          <td>C</td>
          <td>Kemal Pasha</td>
        </tr>
      </tbody>
    </table>
  </div>

  <footer data-role="footer" data-position="fixed">
    <h2>BangHaji DotCom</h2>
  </footer>
</div>

</body>
</html>

Jika dilihat tampilannya kira-kira seperti gambar di bawah.

Selanjutnya →

Halaman : 1 2 3

Tinggalkan Balasan

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