Dalam mengimplementasikan tehnik ini sangat lah mudah cukup dengan satu baris kode
$("#idtabel").tablesorter(); maka sebuah tabel web menjadi sebuah tabel yang bisa diurutkan. seperti contoh berikut :<html><head><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.tablesorter.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#idtable").tablesorter(); });</script></head><body><h3> Klik header untuk mengurutkan data </h3><table id="idtable"><thead><tr> <th>NIP</th> <th>Nama Pegawai</th> <th>Umur</th></tr></thead> <tbody><tr> <td>1500001</td> <td>Cristiano Ronaldo</td> <td>27</td></tr><tr> <td>1500002</td> <td>Lionel Messi</td> <td>28</td></tr>>32</td></tr> </tbody></table></div></body></html>
Sering sekali kita membuat suatu table dan di bagian paling bawah table tersebut dibuat baris jumlah atau total, dan bagian baris itu tidak ingin kita sorting. Sedangkan secara default dengan kode diatas semua row / baris yang ada di tabel tersebut akan ke sorting. Caranya sangat mudah cukup dengan membungkus row atau baris yang tidak akan kita urutkan /sorting dalam tag
<tfoot> </tfoot>
seperti contoh berikut,
<table id="idtable"><thead><tr> <th>NIP</th> <th>Nama Pegawai</th> <th>Umur</th> <th>Jumlah Anak</th> </tr></thead> <tbody><tr> <td>1500001</td> <td>Cristiano Ronaldo</td> <td>27</td> <td>2</td> </tr><tr> <td>1500002</td> <td>Lionel Messi</td> <td>28</td> <td>1</td> </tr></tbody><tfoot> <tr> <td colspan="2">Jumlah Anak Semua Karyawan</td> <td>3</td></tr> </tfoot></table>
No comments:
Post a Comment