how to add edit and delete button in datatable using php?

Today, We want to share with you ajax add edit delete records in database using php.In this post we will show you inline table editing using jquery ajax php and mysql, hear for view/edit and delete using modal in php & mysql we will give you demo and example for implement.In this post, we will learn about Simple PHP JQuery Ajax Insert Update Delete Using MySQLi with an example.

JQuery AJAX Add Edit Delete Records In Database Using PHP

here you can learn to Ajax CRUD [CReate Update Delete] with PHP and MySQL database Example.

index.php

<?php include('do_backend_api.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Insert and Retrieve data from MySQL database with ajax - www.pakainfo.com</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
  	<?php echo $opinions; ?>
  	<form class="opinion_form">
      <div>
        <label for="name">Member Name:</label>
      	<input type="text" name="name" id="name">
      </div>
      <div>
      	<label for="opinion">Opinion:</label>
      	<textarea name="opinion" id="opinion" cols="30" rows="5"></textarea>
      </div>
      <button type="button" id="submit_btn">POST</button>
      <button type="button" id="update_btn" style="display: none;">UPDATE</button>
  	</form>
  </div>
</body>
</html>
<!-- Add JQuery -->
<script src="jquery.min.js"></script>
<script src="scripts.js"></script>

CSS Code

styles.css

.wrapper {
  width: 45%;
  height: auto;
  margin: 10px auto;
  border: 1px solid #cbcbcb;
  background: white;
}
/*
* opinion FORM
**/
.opinion_form {
  width: 80%;
  margin: 100px auto;
  border: 1px solid green;
  background: #fafcfc;
  padding: 20px;
}
.opinion_form label {
  display: block;
  margin: 5px 0px 5px 0px;
}
.opinion_form input, textarea {
  padding: 5px;
  width: 95%;
}
#submit_btn, #update_btn {
  padding: 8px 15px;
  color: white;
  background: #339;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
}
#update_btn {
  background: #1c7600;
}
/*
* opinion DISPLAY AREA
**/
#display_area {
  width: 90%;
  padding-top: 15px;
  margin: 10px auto;
}
.opinion_box {
  cursor: default;
  margin: 5px;
  border: 1px solid #cbcbcb;
  padding: 5px 10px;
  position: relative;
}
.delete {
  position: absolute;
  top: 0px;
  right: 3px;
  color: red;
  display: none;
  cursor: pointer;
}
.edit {
  position: absolute;
  top: 0px;
  right: 45px;
  color: green;
  display: none;
  cursor: pointer;
}
.opinion_box:hover .edit, .opinion_box:hover .delete {
  display: block;
}
.opinion_text {
  text-align: justify;
}
.display_name {
  color: blue;
  padding: 0px;
  margin: 0px 0px 5px 0px;
}

jQuery and JavaScript Code

scripts.js:
save opinion to database

$(document).ready(function(){
  // save opinion to database
  $(document).on('click', '#submit_btn', function(){
    var name = $('#name').val();
    var opinion = $('#opinion').val();
    $.ajax({
      url: 'do_backend_api.php',
      type: 'POST',
      data: {
        'save': 1,
        'name': name,
        'opinion': opinion,
      },
      success: function(response){
        $('#name').val('');
        $('#opinion').val('');
        $('#display_area').append(response);
      }
    });
  });
  // delete from database
  $(document).on('click', '.delete', function(){
  	var id = $(this).data('id');
  	$clicked_btn = $(this);
  	$.ajax({
  	  url: 'do_backend_api.php',
  	  type: 'GET',
  	  data: {
    	'delete': 1,
    	'id': id,
      },
      success: function(response){
        // remove the deleted opinion
        $clicked_btn.parent().remove();
        $('#name').val('');
        $('#opinion').val('');
      }
  	});
  });
  var edit_id;
  var $edit_opinion;
  $(document).on('click', '.edit', function(){
  	edit_id = $(this).data('id');
  	$edit_opinion = $(this).parent();
  	// grab the opinion to be editted
  	var name = $(this).siblings('.display_name').text();
  	var opinion = $(this).siblings('.opinion_text').text();
  	// place opinion in form
  	$('#name').val(name);
  	$('#opinion').val(opinion);
  	$('#submit_btn').hide();
  	$('#update_btn').show();
  });
  $(document).on('click', '#update_btn', function(){
  	var id = edit_id;
  	var name = $('#name').val();
  	var opinion = $('#opinion').val();
  	$.ajax({
      url: 'do_backend_api.php',
      type: 'POST',
      data: {
      	'update': 1,
      	'id': id,
      	'name': name,
      	'opinion': opinion,
      },
      success: function(response){
      	$('#name').val('');
      	$('#opinion').val('');
      	$('#submit_btn').show();
      	$('#update_btn').hide();
      	$edit_opinion.replaceWith(response);
      }
  	});		
  });
});

PHP code

do_backend_api.php

<?php 
  $link = mysqli_connect('localhost', 'root', '', 'ajax');
  if (!$link) {
    die('Connection failed ' . mysqli_error($link));
  }
  if (isset($_POST['save'])) {
    $name = $_POST['name'];
  	$opinion = $_POST['opinion'];
  	$sql = "INSERT INTO opinions (name, opinion) VALUES ('{$name}', '{$opinion}')";
  	if (mysqli_query($link, $sql)) {
  	  $id = mysqli_insert_id($link);
      $saved_opinion = '<div class="opinion_box">
      		<span class="delete" data-id="' . $id . '" >delete</span>
      		<span class="edit" data-id="' . $id . '">edit</span>
      		<div class="display_name">'. $name .'</div>
      		<div class="opinion_text">'. $opinion .'</div>
      	</div>';
  	  echo $saved_opinion;
  	}else {
  	  echo "Error: ". mysqli_error($link);
  	}
  	exit();
  }
  // delete opinion fromd database
  if (isset($_GET['delete'])) {
  	$id = $_GET['id'];
  	$sql = "DELETE FROM opinions WHERE id=" . $id;
  	mysqli_query($link, $sql);
  	exit();
  }
  if (isset($_POST['update'])) {
  	$id = $_POST['id'];
  	$name = $_POST['name'];
  	$opinion = $_POST['opinion'];
  	$sql = "UPDATE opinions SET name='{$name}', opinion='{$opinion}' WHERE id=".$id;
  	if (mysqli_query($link, $sql)) {
  		$id = mysqli_insert_id($link);
  		$saved_opinion = '<div class="opinion_box">
  		  <span class="delete" data-id="' . $id . '" >delete</span>
  		  <span class="edit" data-id="' . $id . '">edit</span>
  		  <div class="display_name">'. $name .'</div>
  		  <div class="opinion_text">'. $opinion .'</div>
  	  </div>';
  	  echo $saved_opinion;
  	}else {
  	  echo "Error: ". mysqli_error($link);
  	}
  	exit();
  }

  // Retrieve opinions from database
  $sql = "SELECT * FROM opinions";
  $result = mysqli_query($link, $sql);
  $opinions = '<div id="display_area">'; 
  while ($row = mysqli_fetch_array($result)) {
  	$opinions .= '<div class="opinion_box">
  		  <span class="delete" data-id="' . $row['id'] . '" >delete</span>
  		  <span class="edit" data-id="' . $row['id'] . '">edit</span>
  		  <div class="display_name">'. $row['name'] .'</div>
  		  <div class="opinion_text">'. $row['opinion'] .'</div>
  	  </div>';
  }
  $opinions .= '</div>';
?>

I hope you get an idea about jquery datatable add edit delete.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or opinions about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.