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
di database kox tidak bisa gan