Cara Membuat Data Tabel Dapat Diurutkan dalam Tulisan di Blog/Website
Berikut ini tutorial singkat cara membuat data tabel yang dapat diurutkan dalam tulisan blog/website secara otomatis. Cukup buat tabel seperti biasa dan tambahkan beberapa baris kode. Pembaca dapat mengurutkan data berdasarkan kolom tertentu yang dikehendaki.
Misal terdapat tabel dengan kolom nomor; nama kabupaten; nama buah beserta harga komoditas seperti contoh berikut yang masih berupa tabel biasa.
Bila ingin mengurutkan berdasar nama kabupaten, tinggal klik bagian atas kolom Nama Kabupaten/Kota, bila ingin mengurutkan harga baik termahal hingga paling murah setiap buah, tinggal klik nama buah.
Di sini memang menggunakan jquery tablesorter yang relatif mudah digunakan.
Urutannya adalah memanggil jquery dan jquery tablesorter dengan menggunakan id (tanda #) yang digunakan dalam pengurutan data dalam kolom tabel. Struktur tabel sebagai mana biasa hanya ditambahkan id table, maka semua tabel akan tertampil dan dapat diurutkan.
Biasanya pada saat preview (pratinjau, sebelum ditampilankan) memang tidak berjalan, lakukan publikasi atau terbitkan tulisan yang mengandung tabel maka semua akan berjalan bila kode ditulis dengan benar.
Langkah:
Catatan:
Pada kode di bawah ini tidak disertakan css, silakan buat sendiri css-nya sesuai selera.
Silakan tambah style CSS untuk tampilan tabel agar lebih bagus dan lebih mudah dibaca. Untuk mempelajari CSS direkomendasikan belajar di sini.
Selamat mencoba. Sumber https://www.urip.info/
Misal terdapat tabel dengan kolom nomor; nama kabupaten; nama buah beserta harga komoditas seperti contoh berikut yang masih berupa tabel biasa.
Bila ingin mengurutkan berdasar nama kabupaten, tinggal klik bagian atas kolom Nama Kabupaten/Kota, bila ingin mengurutkan harga baik termahal hingga paling murah setiap buah, tinggal klik nama buah.
Laporan Harian Harga Eceran Komoditas Buah-buahan Tingkat Kabupaten/Kota
(Satuan dalam Rp/Kg)
Tanggal : 09 Januari 2019
| No. | Nama Kabupaten/Kota | Manggis | Jeruk Siam | Salak | Buah Naga | Melon | Alpokat |
|---|---|---|---|---|---|---|---|
| 1 | Mandailing Natal | 18,000 | 15,000 | 12,000 | 30,000 | 12,000 | 9,000 |
| 2 | Langkat | 20,000 | 13,000 | 12,000 | 30,000 | 10,000 | 15,000 |
| 3 | Serdang Bedagai | 17,500 | 20,000 | 10,000 | 25,000 | 9,000 | 12,000 |
| 4 | Padang Lawas | 20,000 | 0 | 7,000 | 25,000 | 10,000 | 15,000 |
| 5 | Pematang Siantar | 0 | 12,000 | 12,000 | 15,000 | 0 | 12,000 |
| 6 | Ogan Komering Ulu | 12,000 | 15,000 | 10,000 | 30,000 | 15,000 | 15,000 |
| 7 | Rejang Lebong | 10,000 | 0 | 9,000 | 10,000 | 10,000 | 15,000 |
| 8 | Jakarta Pusat | 0 | 20,667 | 12,667 | 18,667 | 9,667 | 20,667 |
| 9 | Bogor | 20,000 | 18,000 | 8,400 | 17,000 | 15,800 | 20,600 |
| 10 | Banjarnegara | 0 | 10,000 | 5,000 | 11,000 | 8,000 | 15,000 |
| 11 | Pati | 15,000 | 19,000 | 10,000 | 13,000 | 13,000 | 25,000 |
| 12 | Sleman | 15,000 | 12,000 | 3,500 | 0 | 7,000 | 20,000 |
| 13 | Buleleng | 18,000 | 22,000 | 15,000 | 12,000 | 15,000 | 22,000 |
| 14 | Bengkayang | 0 | 15,000 | 18,000 | 28,000 | 15,000 | 50,000 |
| 15 | Kayong Utara | 15,000 | 15,000 | 20,000 | 35,000 | 0 | 0 |
| 16 | Kapuas | 15,000 | 15,000 | 17,000 | 25,000 | 17,000 | 35,000 |
| 17 | Seruyan | 25,000 | 18,000 | 18,000 | 22,000 | 15,000 | 35,000 |
| 18 | Barito Timur | 15,000 | 0 | 20,000 | 25,000 | 15,000 | 0 |
| 19 | Tanah Laut | 35,000 | 13,000 | 15,000 | 20,000 | 15,000 | 35,000 |
| 20 | Barito Kuala | 0 | 10,000 | 20,000 | 0 | 0 | 0 |
| 21 | Tapin | 0 | 14,000 | 14,000 | 20,000 | 12,000 | 28,000 |
| 22 | Hulu Sungai Utara | 15,000 | 10,000 | 10,000 | 20,000 | 15,000 | 30,000 |
| 23 | Tojo Una Una | 15,000 | 12,000 | 15,000 | 20,000 | 10,000 | 12,000 |
| 24 | Bantaeng | 0 | 12,500 | 10,000 | 25,000 | 20,000 | 7,500 |
| 25 | Jeneponto | 0 | 13,000 | 20,000 | 25,000 | 20,000 | 20,000 |
| 26 | Polewali Mandar | 20,000 | 10,000 | 10,000 | 18,000 | 7,500 | 15,000 |
Di sini memang menggunakan jquery tablesorter yang relatif mudah digunakan.
Urutannya adalah memanggil jquery dan jquery tablesorter dengan menggunakan id (tanda #) yang digunakan dalam pengurutan data dalam kolom tabel. Struktur tabel sebagai mana biasa hanya ditambahkan id table, maka semua tabel akan tertampil dan dapat diurutkan.
Biasanya pada saat preview (pratinjau, sebelum ditampilankan) memang tidak berjalan, lakukan publikasi atau terbitkan tulisan yang mengandung tabel maka semua akan berjalan bila kode ditulis dengan benar.
Langkah:
- Siapkan data dalam bentuk tabel, misal dengan menggunakan aplikasi olah kata atau spreadsheet.
- Ubah tabel dalam format html, silakan gunakan aplikasi online untuk mengubah ke format html agar kode-nya rapi, misalnya menggunakan Convert word to html atau wordhtml.com/
- Salin hasil konversi menjadi tabel kode html itu ke editor blog/website.
- Tambahkan kode seperti di bawah ini.
- Bila dalam blog sudah memuat jquery pada template blog silakan hapus kode baris pertama dan kedua seperti berikut.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
Cara mengetahuinya coba saja jalankan tanpa script itu, bila tabel tidak dapat diurutkan datanya berarti belum terpasang. Silakan pasang.
- Tambahkan tag <thead> untuk baris atas sebagai kepala kolom tabel jangan lupa penutupnya </thead>. Silakan lihat contoh.
- Simpan dan terbitkan tulisan yang mengandung tabel tadi.
Catatan:
Pada kode di bawah ini tidak disertakan css, silakan buat sendiri css-nya sesuai selera.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.9.1/jquery.tablesorter.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready( function() {$("#komoditas").tablesorter();} ); </script> <table class="tabel2" id="komoditas"><thead> <tr> <th>No.</th> <th>Nama Kabupaten/Kota</th> <th>Manggis</th> <th>Jeruk Siam</th> <th>Salak</th> <th>Buah Naga</th> <th>Melon</th> <th>Alpokat</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mandailing Natal</td> <td>18,000</td> <td>15,000</td> <td>12,000</td> <td>30,000</td> <td>12,000</td> <td>9,000</td> </tr> <tr> <td>2</td> <td>Langkat</td> <td>20,000</td> <td>13,000</td> <td>12,000</td> <td>30,000</td> <td>10,000</td> <td>15,000</td> </tr> <tr> <td>3</td> <td>Serdang Bedagai</td> <td>17,500</td> <td>20,000</td> <td>10,000</td> <td>25,000</td> <td>9,000</td> <td>12,000</td> </tr> <tr> <td>4</td> <td>Padang Lawas</td> <td>20,000</td> <td>0</td> <td>7,000</td> <td>25,000</td> <td>10,000</td> <td>15,000</td> </tr> <tr> <td>5</td> <td>Pematang Siantar</td> <td>0</td> <td>12,000</td> <td>12,000</td> <td>15,000</td> <td>0</td> <td>12,000</td> </tr> <tr> <td>6</td> <td>Ogan Komering Ulu</td> <td>12,000</td> <td>15,000</td> <td>10,000</td> <td>30,000</td> <td>15,000</td> <td>15,000</td> </tr> <tr> <td>7</td> <td>Rejang Lebong</td> <td>10,000</td> <td>0</td> <td>9,000</td> <td>10,000</td> <td>10,000</td> <td>15,000</td> </tr> <tr> <td>8</td> <td>Jakarta Pusat</td> <td>0</td> <td>20,667</td> <td>12,667</td> <td>18,667</td> <td>9,667</td> <td>20,667</td> </tr> <tr> <td>9</td> <td>Bogor</td> <td>20,000</td> <td>18,000</td> <td>8,400</td> <td>17,000</td> <td>15,800</td> <td>20,600</td> </tr> <tr> <td>10</td> <td>Banjarnegara</td> <td>0</td> <td>10,000</td> <td>5,000</td> <td>11,000</td> <td>8,000</td> <td>15,000</td> </tr> <tr> <td>11</td> <td>Pati</td> <td>15,000</td> <td>19,000</td> <td>10,000</td> <td>13,000</td> <td>13,000</td> <td>25,000</td> </tr> <tr> <td>12</td> <td>Sleman</td> <td>15,000</td> <td>12,000</td> <td>3,500</td> <td>0</td> <td>7,000</td> <td>20,000</td> </tr> <tr> <td>13</td> <td>Buleleng</td> <td>18,000</td> <td>22,000</td> <td>15,000</td> <td>12,000</td> <td>15,000</td> <td>22,000</td> </tr> <tr> <td>14</td> <td>Bengkayang</td> <td>0</td> <td>15,000</td> <td>18,000</td> <td>28,000</td> <td>15,000</td> <td>50,000</td> </tr> <tr> <td>15</td> <td>Kayong Utara</td> <td>15,000</td> <td>15,000</td> <td>20,000</td> <td>35,000</td> <td>0</td> <td>0</td> </tr> <tr> <td>16</td> <td>Kapuas</td> <td>15,000</td> <td>15,000</td> <td>17,000</td> <td>25,000</td> <td>17,000</td> <td>35,000</td> </tr> <tr> <td>17</td> <td>Seruyan</td> <td>25,000</td> <td>18,000</td> <td>18,000</td> <td>22,000</td> <td>15,000</td> <td>35,000</td> </tr> <tr> <td>18</td> <td>Barito Timur</td> <td>15,000</td> <td>0</td> <td>20,000</td> <td>25,000</td> <td>15,000</td> <td>0</td> </tr> <tr> <td>19</td> <td>Tanah Laut</td> <td>35,000</td> <td>13,000</td> <td>15,000</td> <td>20,000</td> <td>15,000</td> <td>35,000</td> </tr> <tr> <td>20</td> <td>Barito Kuala</td> <td>0</td> <td>10,000</td> <td>20,000</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <td>21</td> <td>Tapin</td> <td>0</td> <td>14,000</td> <td>14,000</td> <td>20,000</td> <td>12,000</td> <td>28,000</td> </tr> <tr> <td>22</td> <td>Hulu Sungai Utara</td> <td>15,000</td> <td>10,000</td> <td>10,000</td> <td>20,000</td> <td>15,000</td> <td>30,000</td> </tr> <tr> <td>23</td> <td>Tojo Una Una</td> <td>15,000</td> <td>12,000</td> <td>15,000</td> <td>20,000</td> <td>10,000</td> <td>12,000</td> </tr> <tr> <td>24</td> <td>Bantaeng</td> <td>0</td> <td>12,500</td> <td>10,000</td> <td>25,000</td> <td>20,000</td> <td>7,500</td> </tr> <tr> <td>25</td> <td>Jeneponto</td> <td>0</td> <td>13,000</td> <td>20,000</td> <td>25,000</td> <td>20,000</td> <td>20,000</td> </tr> <tr> <td>26</td> <td>Polewali Mandar</td> <td>20,000</td> <td>10,000</td> <td>10,000</td> <td>18,000</td> <td>7,500</td> <td>15,000</td> </tr> </tbody> </table>Silakan tambah style CSS untuk tampilan tabel agar lebih bagus dan lebih mudah dibaca. Untuk mempelajari CSS direkomendasikan belajar di sini.
Selamat mencoba. Sumber https://www.urip.info/