Catatan PHP Ku

Rabu, 01 Februari 2012

Sorting Table dengan PHP dan JQuery

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

Minggu, 29 Januari 2012

Sorting Tabel dengan PHP

Kadang kala dalam menampilkan data yang bersumber dari database dalam bentuk tabel kita ingin lebih dinamis dengan dapatnya kita sorting sesuai dengan kolom tabel yang kita sajikan. Dengan PHP kita dapat melakukannya, berikut contohnya:

Kita ingin menampilkan data mahasiswa yang terdapat dalam database latihan, table m_mahasiswa berikut ini:

Untuk menampilkan data diatas kode PHP-nya adalah sebagai berikut:

<table border=1 cellpadding='1' cellspacing='1'>
<tr bgcolor="#FFCC99">
    <td><strong>NIM</strong></td>
    <td><strong>Mahasiswa</strong></td>
    <td ><strong>No Telp</strong></td>
    <td ><strong>Keterangan</strong></td>
</tr>
<tr>
    <?php
        $perintah = "select * from m_mahasiswa";
        $hasil=mysql_query($perintah);
        while ($data=mysql_fetch_array($hasil)){

    echo "<td> $data[nim]</td>";
    echo "<td>$data[nm_mahasiswa]</td>";
    echo "<td>$data[no_telp]</td>";
    echo "<td>$data[keterangan]</td>";
    }
    ?>
</tr>
</table>

Untuk dapat membuat sorting tentu kita dalam perintah sql-nya harus melakukan syntak order by agar datanya terurut. Nah agar PHP dapat mengurutkannya, pada header tabel, kita berikan tambahan kode sebagai berikut: (perhatikan yang huruf tebal)

<?php
    include ("koneksi.php");
    $perintah = "select * from m_mahasiswa limit 10";
    $hasil=mysql_query($perintah);

?>
<table border=1 cellpadding='1' cellspacing='1'>
<tr bgcolor="#FFCC99">
    <td><strong><a href="<?php $_SERVER['PHP_SELF']?>?by=nim">NIM</a></strong></td>
    <td><strong><a href="<?php $_SERVER['PHP_SELF']?>?by=nm_mahasiswa"> Mahasiswa </a></strong></td>
    <td ><strong><a href="<?php $_SERVER['PHP_SELF']?>?by=no_telp">No Telp</a></strong></td>
    <td ><strong><a href="<?php $_SERVER['PHP_SELF']?>?by=keterangan"> Keterangan</a></strong></td>
</tr>
<tr>
<?php
if ($_GET['by'] == "nim") $orderBy = "nim";
else if ($_GET['by'] == "nm_mahasiswa") $orderBy = "nm_mahasiswa";
else if ($_GET['by'] == "no_telp") $orderBy = "no_telp";
else if ($_GET['by'] == "keterangan") $orderBy = "keterangan";
else $orderBy = "nim";

        $perintah = "select * from m_mahasiswa order by $orderBy asc";
        $hasil=mysql_query($perintah);
        while ($data=mysql_fetch_array($hasil)){

        echo "<td> $data[nim]</td>";
    echo "<td>$data[nm_mahasiswa]</td>";
    echo "<td>$data[no_telp]</td>";
    echo "<td>$data[keterangan]</td>";
    }
    ?></tr>
</table>

Nah tentu setelah kita tambahkan code diatas, ketika kita klik link header, akan dipanggil kembali file php kita dan akan membawa variable untuk mengurutkan (order by).
Data setelah diurut berdasarkan Nama

Selamat mencoba....

Halaman

Rabu, 01 Februari 2012

Sorting Table dengan PHP dan JQuery

Minggu, 29 Januari 2012

Sorting Tabel dengan PHP