jtablesorter bisa mengurutkan data cukup dengan menklik header table
Table sorter adalah teknik mengurutkan data di table halaman HTML dengan menggunakan jQuery, lebiht tepatnya menggunakan jquery plugin bernama tablesorter. Teknik yang digunakan oleh table sorter murni hanya menggunakan javascript sehingga tidak perlu harus koneksi keserver. Salahsatu website yang menggunakan teknik sorting jenis ini adalah wikipedia.Anda bisa mencoba contohnya disini.

Bagaimana caranya?
langkah implementasi tablesorter cukup sederhana, lihat code berikut ini. perhatikan baris baris yang di highlight. Cukup dengan satu baris kode $("#tablemhs").tablesorter(); maka sebuah tabel web menjadi sebuah tabel yang bisa diurutkan. Simple kan?

<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" 
src="js/jquery.tablesorter.js"></script>
<!--cukup satu baris script untuk mengubah
 table sortable sorter,perhatikan id tablenya -->
<script type="text/javascript">

$(document).ready(function()
	{
		$("#tablemhs").tablesorter();
	}
);
</script>
</head>
<body>
<div align='center'>
<h3> Klik header untuk mengurutkan data </h3>
<table id="tablemhs">
<thead>
<tr>
	<th>NIM</th>
	<th>Nama</th>
	<th>IPK</th>
	<th>Jurusan</th>
	
</tr>
</thead>
<tbody>
<tr>
	<td>09123</td>
	<td>Indra Bekti</td>
	<td>3.30</td>
	<td>SI</td>
	
</tr>
<tr>
	<td>09124</td>
	<td>Candra</td>
	<td>3.50</td>
	<td>TI</td>
	
</tr>
<tr>
	<td>09125</td>
	<td>Sutarman</td>
	<td>2.10</td>
	<td>MI</td>
	
</tr>

</tbody>
</table>
</div>
</body>
</html>

Integrasi PHP
Data diatas adalah data statis, bagaimana jika isi tabel data diambil dari database. Cukup ganti code antara diantara tbody dengan pola
potongan code seperti ini. Tentunya anda harus menyesuaikan dengan tabel sesuai kebutuhan anda.

while($rows=mysql_fetch_object($result)){
		?>
		<tr>
		<td><? echo $rows->nim ?></td>
			<td><?echo $rows -> nama;?></td>		
		<td><?		echo $rows ->ipk;?></td>
		<td><?		echo $rows ->jurusan;?></td>
</tr>

Download source
Bagi yang mau mencobanya sendiri silahkan download contoh lengkapnya disini

Categories: jQueryPHP

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

1 Comment

yasir giparna pmg (@yasierown) · 16 August , 2014 at 4:59 pm

di database kox tidak bisa gan

Tinggalkan Komentar plz!

This site uses Akismet to reduce spam. Learn how your comment data is processed.