Cara Membuat Data Tabel Dapat Diurutkan dalam Tulisan di Blog/Website

Kamis, 10 Januari 2019 edit

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.

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:
  1. Siapkan data dalam bentuk tabel, misal dengan menggunakan aplikasi olah kata atau spreadsheet.
  2. 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/
  3. Salin hasil konversi menjadi tabel kode html itu ke editor blog/website. 
  4. Tambahkan kode seperti di bawah ini.
  5. 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.
  6. Tambahkan tag <thead> untuk baris atas sebagai kepala kolom tabel jangan lupa penutupnya </thead>. Silakan lihat contoh.
  7. 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.
Bagikan di

Tidak ada komentar:

Posting Komentar

 
Copyright © 2015-2019 Urip dot Info | Disain Template oleh Herdiansyah Dimodivikasi Urip.Info