Masih ada hubungannya dengan postingan saya sebelumnya tentang Sorting Table dengan PHP, kali ini saya mencatat juga cara lain untuk dapat sorting data dari table yang kita sajikan dengan bantuan J-Query.
Ini lebih simple dari trik sebelumnya dan tentunya lebih menarik, berikut catatannya:
- Buatlah code html dan php untuk menampilkan data (contoh masih data mahasiswa pada postingan sebelumnya)
- Kita menggunakan plug-in JQuery berikut ini:
- jquery-1.4.js
- jquery.tablesorter.min.js
- Siapkan image asc.gif, dsc.gif dan bg.gif (ini untuk gambar pada headernya)
- Buatkan css sebagai berikut ini (berikan nama tableSort.css ya namanya bisa beda juga sih):
thead th {
cursor: pointer;
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
}
thead tr .headerSortUp {
background-image: url(desc.gif);
background-repeat: no-repeat;
background-position: center right;
}
thead tr .headerSortDown {
background-image: url(asc.gif);
background-repeat: no-repeat;
background-position: center right;
}
- Dalam code html dan php yang telah dapat menampilkan data tersebut, kita tinggal tambahkan code seperti dibawah ini:
<html>
<head>
<title>Sorting Tabel dengan PHP dan JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="tableSort.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table").tablesorter();
});
</script>
</head>
<body bgcolor="#FFFFFF">
<?php
include ("koneksi.php");
?>
<table border=1 cellpadding='1' cellspacing='1'>
<thead>
<tr bgcolor="#FFCC99">
<th width="75px"><strong>NIM </strong></th>
<th width="150px"><strong>Mahasiswa </strong></th>
<th width="100px"><strong>No Telp </strong></th>
<th width="130px"><strong>Keterangan </strong></th>
</tr>
</thead>
<?php
$perintah = "select * from m_mahasiswa";
$hasil=mysql_query($perintah);
while ($data=mysql_fetch_array($hasil))
{
echo ("<tr><td> $data[nim]</td>");
echo ("<td>$data[nm_mahasiswa]</td>");
echo ("<td>$data[no_telp]</td>");
echo ("<td>$data[keterangan]</td></tr>");
}
?>
</table>
</body>
</html>
- Dan kita lihat hasilnya, kita bisa sorting sesuai header table sesuka hati:
Menarik bukan???
download source code
