Jika teman-teman sudah pernah bermain dengan excel atau data-data lainya pasti teman-teman melihat diamana judul dari kolom tersebut ketika kita scroll kebawah maka judul itu hilang melainkan masih terlihat di atasnya, dan disini kita akan belajar membuat itu cara simple membuat sticky table, jadi jangan kemana-mana simak terus ya teman-teman.
Cara simple membuat sticky table, jika teman-teman pernah mengunjungi website dimana ada sebuah menu yang kita scroll dan menu itu masih berada di atasnya. itu lah sticky menu, jadi fungsi sticky ini berguna jika teman-teman mempunyai data banyak dimana jika teman-teman lupa dengan nama kolom yang teman-teman lihat maka tidak akan lupa lagi, seperti itu.
dan untuk cara simple membuat sticky table, disini saya masih menggunakan dari plugin jqueryscript, ya saya harap teman-teman tau ya cara penggunannya, jika belum tau silahkan teman kunjungi disini Jika di plugin aslinya ada sticky atas, kanan, bawah, kiri. Disini saya akan mencontohkannya satu aja yaitu atasnya, dan disini saya akan menambahkan sedikit yaitu button untuk melihat data semuanya tanpa scroll dan button reset.
Oke sekarang silahkan teman-teman copy saja kodenya di bawah ini, dan lihat hasilnya:
|
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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!DOCTYPE html> <html> <head> <title>Cara Simple Membuat Sticky Table</title> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="sticky-table.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script type="text/javascript" src="sticky-table.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.table-base').sticky({ 'top':" tr:first-child" // 'left':" tr td:first-child", // "right":" tr td:last-child", // "bottom":" tr:last-child" }); }) window.documentdoc function tampilkanAll(){ setTimeout(function(){ $('.table-base').unstick(); },1000); } function kecilkan(){ location.reload(); } </script> <style type="text/css"> .wrapper { max-height: 500px; min-height: 200px; min-width: 500px; max-width: 800px; margin: auto; margin-top: 20px; } .skt-sticky-top td{ font-weight:bold; } </style> </head> <body> <div class="wrapper"> <h1 class="text-center">Cara Simple Membuat Sticky Table</h1> <button class="btn btn-primary btn-sm mb-2" onclick="tampilkanAll()">Tampilkan semua</button> <button class="btn btn-primary btn-sm mb-2" onclick="kecilkan()">Reset</button> <table class="table table-striped table-base"> <tr> <td>Judul 1</td> <td>Judul 2</td> <td>Judul 3</td> <td>Judul 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </table> </div> </body> </html> |
Disini saya mencontohkannya banya data supaya fungsi scrollnya tampil, dan inti dari ini jika teman-teman lihat:
|
1 2 3 4 5 6 |
$('.table-base').sticky({ 'top':" tr:first-child" // 'left':" tr td:first-child", // "right":" tr td:last-child", // "bottom":" tr:last-child" }); |
ini adalah fungsi yang membuat sebuah judul itu bisa menjadi sticky, dan bisa teman-teman lihat jika teman-teman ingin menggunakan sticky untuk kanan kiri bawah, teman-teman tinggal hidupkan saja komen yang saya buat di atas, oke untuk hasil di atas adalah seperti ini:
dan ketika saya klik button tampilkan semuanya, maka scroll pun hilang
seperti inilah kira-kira bagaimana simple ya, jika ada yang kurang jelas teman-teman bisa tanyakan di bawah ini, dan saya rasa cukup untuk artikel Cara simple membuat sticky table semoga bermanfaat sampai jumpa pada artikel berikutnya terimakasih.