0

Menggunakan tablesorter.js

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 :
cara dasar menggunakan tablesorter.js
– Untuk penyortirannya, tinggal klik 2x header “Last Name”, “First Name”, dan “Email”.

Demonya bisa dilihat disini.

2) ajax tablesorter.js
menggunakan tablesorter di ajax
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!

[related_post themes="text" id="3527"]

Ambar Hasbiyatmoko

Hello, I’m web developer. Passionate about programming, networking and web server. @kaskus  @facebook

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.