Codeigniter Dasar – Menghapus data dengan Jquery


Untuk menghapus data menggunakan Ajax dengan Jquery, sebenarnya tidk terlalu sulit. Dengan menggunakan data yang terdahulu pernah kita buat. Kita mempunyai 2 view yaitu show.php dan input.php. Ubah show.php untuk meletakkan fungsi Jquery yang digunakan untuk mengirim data secara Ajax dan memanggil Controller untuk menghapus data. Kemudian Jquery akan menghilangkan baris dengan triger class pada barisnya dengan fungsi animate. Ah terlalu bertele-tele hahahaha bikin ribet, padahal dalam codingnya tidak terlalu banyak perubahan.

Tambahkan script berikut pada view show.php pada aplikasi ci_ku yang kita buat sebelumnya :), sehingga show.php akan menjadi seperti berikut :

<script type="text/javascript">
$(document).ready(function() {

 $(".delbutton").click(function(){

 //Save the link in a variable called element
 var element = $(this);

 //Find the id of the link that was clicked
 var del_id = element.attr("id");

 //Built a url to send
 var info = 'id=' + del_id;
 if(confirm("Anda yakin akan menghapus?"))
 {
 $.ajax({
 type: "POST",
 url : "<?php echo site_url('daily/delete')?>",
 data: info,
 success: function(){
 }
 });

 $(this).parents(".record").animate({ opacity: "hide" }, "slow");

 }

 return false;

 });

})
</script>
<b>Daily Notes</b>
<table border="1">
 <tr>
 <th>No</th>
 <th>Date</th>
 <th>Name</th>
 <th>Amount</th>
 <th>Delete</th>
 </tr>
 <?
 $i=0;
 foreach ($query as $row){
 $i++;
 echo "<tr class=\"record\">";
 echo    "<td>$i</td>";
 echo    "<td>$row->date</td>";
 echo    "<td>$row->name</td>";
 echo    "<td>$row->amount</td>";
 echo      "<td><a class=\"delbutton\" id=\"$row->id\" href=\"#\" >Delete</a></td>";
 echo  "</tr>";
 }
 ?>
</table>

Perhatikan pada baris ke 53 yaitu pada bagian menampilkan link delete, tampak seperti di atas

echo "<td><a class=\"delbutton\" id=\"$row->id\"  href=\"#\" >Delete</a></td>";

Script javascript di ataslah (baris 133) yang digunakan Jquery untuk mengirimkan data ke controller daily dan menjalankan fungsi delete. Kemudian ubah link delete (baris 53), tambahkan id sebagai data yang akan dihapus dan class delbutton sebagai triger pada Jquery untuk menjalankan fungsi hapus ini.
Jangan lupa ubah controller daily pada fungsi delete menjadi seperti dibawah ini :

function delete()
 {
 $id = $this->input->post('id');
 $this->db->delete('daily', array('id' => $id));
 }

Selesai.. Saya ingin membuat halaman demonya, tetapi belum sempat. Kalo mau download source lengkapnya silahkan ambil di sini