Minggu, 18 Desember 2016

Cara Membuat Expand/Collapse Table Rows dengan Bootstrap dan JQuery

/ in , , / with 2 comments /

Catatan kali ini saya mencoba membuat tutorial sederhana mengenai row expand/collapse pada table atau biasa sering dikenal show/hide (memerperlihatkan/menyembunyikan) row detail pada html dengan menggunakan bootstrap css untuk mempercatik tampilan dan jquery yang nantinya digunakan untuk menangani event ketika header diklik. Berikut tampilan yang nantinya akan dihasilkan.
Tampilan yang dihasilkan dengan menggunakan bootstrap
Ok langsung saja
Pertama kita download dulu bootstrap di website resminya http://getbootstrap.com/getting-started/#download
 

Extract file bootstrap-3.3.7-dist.zip sudah terdownload.
Copy-kan seluruh isi folder yang ada pada folder bootstrap-3.3.7-dist pada folder latihan kita.
Contoh disini folder latihan saya beri nama expand_collapse_row_table_bootstrap.
Lalu bikin file html pada folder expand_collapse_row_table_bootstrap, saya beri nama index.html
sehingga strukturnya sekarang seperti berikut.

Lalu edit file index.html dengan code editor kesayangan anda. Saya disini menggunakan atom sebagai editor. Lalu tuliskan kode berikut pada index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar - Expand Collapse Row Table</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="col-sm-12">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h5>Belajar - Expand Collapse Row Table</h5>
        </div>
        <div class="panel-body">
          <table class="table table-bordered">
            <tr  class="header expand">
                <th>Taufik Urrohman <span class="sign"></span></th>
            </tr>
            <tr>
              <td>
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Sekolah</th>
                      <th>Kota/Kabupaten</th>
                      <th>Tahun</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>SD Negeri Gumukmas 07</td>
                      <td>Jember</td>
                      <td>1998 - 2004</td>
                    </tr>
                    <tr>
                      <td>MTs Negeri Kencong</td>
                      <td>Jember</td>
                      <td>2004 - 2007</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr  class="header expand">
              <th>Riki Huda Maulana <span class="sign"></span></th>
            </tr>
            <tr>
              <td>
                <table class="table table-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Sekolah</th>
                      <th>Kota/Kabupaten</th>
                      <th>Tahun</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>MI Tembokrejo</td>
                      <td>Jember</td>
                      <td>1998 - 2004</td>
                    </tr>
                    <tr>
                      <td>MTs Negeri Kencong</td>
                      <td>Jember</td>
                      <td>2004 - 2007</td>
                    </tr>
                    <tr>
                      <td>SMA Negeri 2 Jember</td>
                      <td>Jember</td>
                      <td>2007 - 2010</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>

Dari kode diatas maka akan menghasilkan tampilan seperti dibawah ini


Selanjutnya kita bikib style.css untuk keperluan header. Sehingga sekarang strukturnya seperti berikut.

Tuliskan kode css berikut pada pada file style.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
tr.header{
    cursor:pointer;
}

.header .sign:after{
    content:"+";
    display:inline-block;
}

.header.expand .sign:after{
    content:"-";
 }


Setelah style.css sudah selesai, kemudian tambahkan kode berikut pada index.html di bagian tag head

Setelah semua selesai, maka sekarang kita buat event untuk  expand/collapse baris detail.
Dibagian ini kita membutuhkan library javascript yaitu JQuery, apa itu JQuery? baca disini : https://en.wikipedia.org/wiki/JQuery.
Sekarang kita download dulu JQuery di websitenya : https://jquery.com/download/

Setelah download berhasil, letakkan file jquery-3.1.1.min.js pada folder jquery dan buat file app.js yang letaknya sejajar (satu folder) dengan file style.css. Sehingga struktur folder sekarang seperti ini.

 pada file app.js tuliskan kode javascript dibawah ini, kode inilah yang bisa membuat detail collapse maupun expand.

1
2
3
4
5
6
7
8
$( document ).ready(function() { // Handler for .ready() called.
  // sebagai action ketika row diklik
  $('.header').click(function(){
       $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
  });

  $('.header').click();
});

Setalah kode tersebut selesai, sekarang tinggal tambahkan 2 baris kode untuk pada file index.html untuk memanggil jquery dan app.js yang telah kita buat tadi.


*Note : Perhatikan letak/struktur code, bisa jadi akan gagal jika urutan code salah (tidak pada tempatnya).

Maka hasilnya seperti berikut. Klik Pada baris header untuk Expand/Collapse atau show/hide detail row.

Semoga bermanfaat.
File latihan tersebut bisa didownload disini

2 komentar:

  1. budi5 Februari 2018 pukul 15.59

    Bang mau tanya kalo yang di ekspand itu perkolom bagaimana ya bang, jadi begini saya ada tabel

    a b c
    -------
    1 2 3

    trus isi dari file yang sama dengan kolom a

    jadi hasilnya setelah menggunakan data

    a b c
    -------
    1 2 3
    4 5 6
    7 8 9

    BalasHapus
  2. Markas Code13 November 2018 pukul 14.13

    mau tanya kalau setting supaya tabel nya terbuka default gimana ya

    BalasHapus

Langganan: Posting Komentar (Atom)