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.

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.