Halo, kali ini saya mau share cara penggunaan tablesorter.js. Tablesorter.js digunakan untuk menyortir data dalam tabel. Cara penggunaannya cukup mudah kok, yang penting kita harus punya file jquery.js dan tablesorter.js saja.
Berikut cara penggunaannya :
1) basic tablesorter.js
– download tablesorter.js dari websitenya.
– buat index.html, lalu kita masukkan script berikut :
<table id="myTable" class="tablesorter" border="1">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ambar</td>
<td>Hasbiyatmoko</td>
<td>mokox@gmail.com</td>
</tr>
<tr>
<td>Ronald</td>
<td>Dinho</td>
<td>rdho@gmail.com</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.tablesorter.js"></script>
<script>
$(function(){
$("#myTable").tablesorter();
});
</script>
*Pada script diatas, kita tentukan id tabelnya dengan nama myTable. Id ini nanti digunakan untuk pemanggilan tablesorter.js pada baris 28.
*Jangan lupa untuk memasukkan jquery.js dan tablesorter.js pada baris 23 dan 24.
Jika dijalankan akan tampil seperti ini :
– Untuk penyortirannya, tinggal klik 2x header “Last Name”, “First Name”, dan “Email”.
Demonya bisa dilihat disini.
2) ajax tablesorter.js
Kita bisa juga menggunakan tablesorter.js pada ajax. Namun ada 1 script yang harus ditambahkan agar tablesorter bisa berfungsi dalam ajax.
<table id="myTable" class="tablesorter" border="1">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<!-- ajax data -->
</tbody>
</table>
<button class="button_ajax">ajax</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.tablesorter.js"></script>
<script>
$(function(){
$("#myTable").tablesorter();
});
$('.button_ajax').on('click', function(){
$.ajax({
type : "POST",
url : "getdata_tablesorter.php",
success : function(data) {
$('tbody').html(data);
$("#myTable").trigger('update');
}
});
});
</script>
Yang perlu ditambahkan adalah script $("#myTable").trigger('update');. Script ini harus ada, jika tidak maka tablesorter.js tidak akan berfungsi.
Demonya ada disini.
semoga bermanfaat!
