Hapus Record Tabel Dengan Efek Animasi

Posted on Updated on


Saya sangat menyukai efek animasi yang ditampilkan pada saat kita menghapus record suatu tabel pada halaman Administrator WordPress. Dengan efek animasi tersebut user bisa melihat proses dihapusnya record pada tabel. Bandingkan kalau tidak ada sama sekali, kita tidak mengetahui secara pasti record yang kita klik sudah dihapus atau belum.

Nah, pada artikel ini saya akan membahas bagaimana cara menambahkan efek seperti di atas pada saat kita menghapus record pada tabel. Saya tidak tahu secara pasti apakah cara yang saya pakai ini sama seperti yang dipakai pada WordPress, tapi yang jelas hasilnya bisa dikatakan hampir sama.

Untuk lebih mudahnya library yang akan kita pakai pada kasus ini adalah jQuery. Triknya sebenarnya sangat sederhana, yaitu kita ubah terlebih dahulu warna background dari record tersebut dengan warna yang lebih mencolok daripada sebelumnya. Selanjutnya tampilkan animasi hapus record dengan metode fadeOut.

Pada kasus ini saya hanya akan membahas bagaimana menghapus record tabel pada sisi client saja (dengan jQuery) sedangkan untuk sisi servernya, saya yakin Anda sudah tahu bagaimana caranya. Saya berikan bocoran sedikit, yaitu kita panggil script PHP untuk menghapus record tersebut dengan AJAX, lalu jika record tersebut berhasil dihapus barulah efek animasi tersebut dijalankan.

Langkah pertama, kita buat sebuah tabel lengkap dengan isinya dan dilengkapi dengan menu Hapus Record di bagian kanannya.

<table border="1" cellpadding="3" cellspacing="1" width="100%">
<tr><th>Kode</th><th>Nama</th><th>Alamat</th><th>Tindakan</th></tr>
<tr>
<td>1</td>
<td>Wahyu Wibowo</td>
<td>Srandakan Bantul Yogyakarta</td>
<td><a href="#" rel="1">Hapus Record</a></td>
</tr>
<tr>
<td>2</td>
<td>Arya Saloka</td>
<td>Jalan Samas Km 3 Yogyakarta</td>
<td><a href="#" rel="2">Hapus Record</a></td>
</tr>
<tr>
<td>3</td>
<td>Anita</td>
<td>Samirono Depok Sleman</td>
<td><a href="#" rel="3">Hapus Record</a></td>
</tr>
</table>

Langkah selanjutnya kita buat script dengan jQuery yang akan dipanggil pada saat kita mengklik menu Hapus Record. Event yang kita pakai pada kasus ini yaitu click() dengan selector class delete-item. Berikut ini contoh kodenya:

if (confirm("Anda yakin ingin menghapus record ini?"))
{
$(this).parents("tr").find("td").css("background-color", "#c73e14").fadeOut(1200, function(){
$(this).parents("tr").remove();
});
}

Nah, berikut ini kode selengkapnya.

<html>
<head>
<title>Hapus Record dengan Efek Animasi</title>
http://js/jquery-1.4.2.min.js

$(function() {
$(".delete-item").click(function(){
if (confirm("Anda yakin ingin menghapus record ini?"))
{
$(this).parents("tr").find("td").css("background-color", "#c73e14").fadeOut(1200, function(){
$(this).parents("tr").remove();
});
}
return false;
});
});

</head>
<body>
<table border="1" cellpadding="3" cellspacing="1" width="100%">
<tr><th>Kode</th><th>Nama</th><th>Alamat</th><th>Tindakan</th></tr>
<tr>
<td>1</td>
<td>Wahyu Wibowo</td>
<td>Srandakan Bantul Yogyakarta</td>
<td><a href="#" rel="1">Hapus Record</a></td>
</tr>
<tr>
<td>2</td>
<td>Arya Saloka</td>
<td>Jalan Samas Km 3 Yogyakarta</td>
<td><a href="#" rel="2">Hapus Record</a></td>
</tr>
<tr>
<td>3</td>
<td>Anita</td>
<td>Samirono Depok Sleman</td>
<td><a href="#" rel="3">Hapus Record</a></td>
</tr>
</table>
</body>
</html>

Untuk kasus yang sebenarnya, pada event click() tersebut kita panggil prosedur untuk menghapus record di sisi server terlebih dahulu (script PHP) baru setelah itu jika prosesnya berhasil kita tampilkan efek animasi seperti di atas.

Contohnya yaitu sebagai berikut:

if (confirm("Anda yakin ingin menghapus record ini?"))
{
tmpID = $(this).attr("rel");
$.ajax({
url: "delete.php",
dataType: "xml",
data: {itemID: tmpID},
type: "POST",
success: function(xml){
$(this).parents("tr").find("td").css("background-color", "#c73e14").fadeOut(1200, function(){
$(this).parents("tr").remove();
});
}
});
}

Barangkali ada yang mempunyai ide lain?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s