Cara Membuat jQuery AJAX Inline CRUD dengan PHP

Inline CRUD untuk melakukan operasi Create, Read, Update and Delete dalam tampilan grid. Inline CRUD akan memperkaya halaman dengan menambahkan baris baru dan mengubah data yang ada secara dinamis melalui jQuery AJAX.Untuk menambahkan catatan baru, saya membuat baris tabel baru dengan kolom yang dapat diedit dan menggunakan jQuery append untuk menambahkannya ke baris yang ada. Saya menetapkan properti “contenteditable” menjadi true agar kolom tabel dapat diedit.

HTML Editable Table Rows

Kode ini untuk membaca database records dan daftar konten yang dapat diedit dengan menetapkan “contenteditable” sebagai true. berikutÂ scriptnya,

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();

$sql = "SELECT * from posts";
$posts = $db_handle->runSelectQuery($sql);
?>
<table class="tbl-qa">
  <thead>
	<tr>
	  <th class="table-header">Title</th>
	  <th class="table-header">Description</th>
	  <th class="table-header">Actions</th>
	</tr>
  </thead>
  <tbody id="table-body">
	<?php
	if(!empty($posts)) { 
	foreach($posts as $k=>$v) {
	  ?>
	  <tr class="table-row" id="table-row-<?php echo $posts[$k]["id"]; ?>">
		<td contenteditable="true" onBlur="saveToDatabase(this,'post_title','<?php echo $posts[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[$k]["post_title"]; ?></td>
		<td contenteditable="true" onBlur="saveToDatabase(this,'description','<?php echo $posts[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[$k]["description"]; ?></td>
		<td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $posts[$k]["id"]; ?>);">Delete</a></td>
	  </tr>
	  <?php
	}
	}
	?>
  </tbody>
</table>

<?php

require_once("dbcontroller.php");

$db_handle = new DBController();

$sql = "SELECT * from posts";

$posts = $db_handle->runSelectQuery($sql);

<thead>

<tr>

<th class="table-header">Title</th>

<th class="table-header">Description</th>

<th class="table-header">Actions</th>

</tr>

</thead>

<?php

if(!empty($posts)) {

foreach($posts as $k=>$v) {

<td contenteditable="true" onBlur="saveToDatabase(this,'post_title','<?php echo $posts[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[$k]["post_title"]; ?></td>

<td contenteditable="true" onBlur="saveToDatabase(this,'description','<?php echo $posts[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[$k]["description"]; ?></td>

<td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $posts[$k]["id"]; ?>);">Delete</a></td>

</tr>

<?php

}

</tbody>

</table>

jQuery AJAX Inline Add

Skrip ini digunakan untuk membuat baris dengan opsi â€˜Simpanâ€™ dan â€˜Batalkanâ€™. Setelah memasukkan data, event klik opsi â€˜Simpanâ€™ akan memasukan data ke database. Setelah berhasil memasukkan, saya mengambil data baru dan menambahkannya ke bagian tabel.

<script>
	function createNew() {
		$("#add-more").hide();
		var data = '<tr class="table-row" id="new_row_ajax">' +
		'<td contenteditable="true" id="txt_title" onBlur="addToHiddenField(this,\'title\')" onClick="editRow(this);"></td>' +
		'<td contenteditable="true" id="txt_description" onBlur="addToHiddenField(this,\'description\')" onClick="editRow(this);"></td>' +
		'<td><input type="hidden" id="title" /><input type="hidden" id="description" /><span id="confirmAdd"><a onClick="addToDatabase()" class="ajax-action-links">Save</a> / <a onclick="cancelAdd();" class="ajax-action-links">Cancel</a></span></td>' +	
		'</tr>';
	  $("#table-body").append(data);
	}
	function cancelAdd() {
		$("#add-more").show();
		$("#new_row_ajax").remove();
	}
	function addToDatabase() {
	  var title = $("#title").val();
	  var description = $("#description").val();
	  
		  $("#confirmAdd").html('<img src="loaderIcon.gif" />');
		  $.ajax({
			url: "add.php",
			type: "POST",
			data:'title='+title+'&description='+description,
			success: function(data){
			  $("#new_row_ajax").remove();
			  $("#add-more").show();		  
			  $("#table-body").append(data);
			}
		  });
	}
	function addToHiddenField(addColumn,hiddenField) {
		var columnValue = $(addColumn).text();
		$("#"+hiddenField).val(columnValue);
	}
</script>

function createNew() {

$("#add-more").hide();

var data = '<tr class="table-row" id="new_row_ajax">' +

'<td contenteditable="true" id="txt_title" onBlur="addToHiddenField(this,\'title\')" onClick="editRow(this);"></td>' +

'<td contenteditable="true" id="txt_description" onBlur="addToHiddenField(this,\'description\')" onClick="editRow(this);"></td>' +

'<td><input type="hidden" id="title" /><input type="hidden" id="description" /><span id="confirmAdd"><a onClick="addToDatabase()" class="ajax-action-links">Save</a> / <a onclick="cancelAdd();" class="ajax-action-links">Cancel</a></span></td>' +

'</tr>';

$("#table-body").append(data);

}

function cancelAdd() {

$("#add-more").show();

$("#new_row_ajax").remove();

}

function addToDatabase() {

var title = $("#title").val();

var description = $("#description").val();

$("#confirmAdd").html('<img src="loaderIcon.gif" />');

$.ajax({

url: "add.php",

type: "POST",

data:'title='+title+'&description='+description,

success: function(data){

$("#new_row_ajax").remove();

$("#add-more").show();

$("#table-body").append(data);

}

});

}

function addToHiddenField(addColumn,hiddenField) {

var columnValue = $(addColumn).text();

$("#"+hiddenField).val(columnValue);

}

</script>

Edit dan Hapus inline menggunakan jQuery

Saya menyebut edit pada event blur pada kolom yang dapat diedit yang telah saya lihat. Aksi hapus menghapus baris dari UI dan kemudian dari database.

<script>
	function saveToDatabase(editableObj,column,id) {
	  $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
	  $.ajax({
		url: "edit.php",
		type: "POST",
		data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
		success: function(data){
		  $(editableObj).css("background","#FDFDFD");
		}
	  });
	}
	function deleteRecord(id) {
		if(confirm("Are you sure you want to delete this row?")) {
			$.ajax({
				url: "delete.php",
				type: "POST",
				data:'id='+id,
				success: function(data){
				  $("#table-row-"+id).remove();
				}
			});
		}
	}
</script>

function saveToDatabase(editableObj,column,id) {

$(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");

$.ajax({

url: "edit.php",

type: "POST",

data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,

success: function(data){

$(editableObj).css("background","#FDFDFD");

}

});

}

function deleteRecord(id) {

if(confirm("Are you sure you want to delete this row?")) {

$.ajax({

url: "delete.php",

type: "POST",

data:'id='+id,

success: function(data){

$("#table-row-"+id).remove();

}

});

}

</script>

Output dari Cara Membuat jQuery AJAX Inline CRUD dengan PHP

Oke itulah tadi pembahasan saya tentang Cara Membuat jQuery AJAX Inline CRUD dengan PHP, semoga bermanfaat.

Cara Membuat jQuery AJAX Inline CRUD dengan PHP

Facebook DUMET School

Konsultasi Gratis

Categories