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
Hehe mas kadek saya komentar nie, sekarang sudah tidak pake PHP lagi ya? Wkwkwk kok blog nya lama ndak di update? Wkwk kebayang percakapan tadi malam, untung bisa lolos dari pembunuhan ya?
BalasHapus-nusa-
Wynn Resorts - Wooricasinos
BalasHapusWynn Resorts 손 풀기 게임 (or Wynn Resorts) is one of the world's most recognizable and 사이트 추천 recognizable names in the 호벳 world of casino gaming. It is located on 217 acres 캔토토 in hit bet
Casino Del Sol - Dr. Maryland
BalasHapusOur flagship 의왕 출장안마 location at the Harrah's Cherokee Casino is a 3-story high-rise 공주 출장안마 building in Valley Center, NC. 문경 출장샵 Featuring a AAA Four 경주 출장안마 Diamond resort, this 태백 출장샵 3-