How to Delete Multiple Data using PHP and AJAX

❮ Previous Next ❯

This tutorial will teach you How to Delete Multiple Data using PHP and AJAX.

Here we using 4 file for Delete multiple data from MySql database using Ajax.

  1. database.php
  2. delete_ajax.php
  3. view_ajax.php
  4. view.php

Table curd

CREATE TABLE `crud` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `city` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

database.php

<?php
	$servername = "localhost";
	$username = "root";
	$password = "";
	$db="school";
	// Create connection
	$conn = mysqli_connect($servername, $username, $password,$db);
?>

delete_ajax.php

<?php
	include 'database.php';
	if(isset($_POST['id'])) {
		$id = trim($_POST['id']);
		$sql = "DELETE FROM crud WHERE id in ($id)";
		if(mysqli_query($conn, $sql)){
			echo $id;
		}
	}
?>

view.php

<?php
	include 'database.php';
	$sql = "SELECT * FROM crud";
	$result = $conn->query($sql);
	if ($result->num_rows > 0) {
		while($row = $result->fetch_assoc()) {
?>	
		<tr id="<?php echo $row["id"]; ?>">
			<td><input type="checkbox" class="emp_checkbox" data-emp-id="<?php echo $row["id"]; ?>"></td>
			<td><?=$row['name'];?></td>
			<td><?=$row['email'];?></td>
			<td><?=$row['phone'];?></td>
			<td><?=$row['city'];?></td>
			<td><button type="button" class="btn btn-success btn-sm delete" data-id="<?=$row['id'];?>">Delete</button></td>
		</tr>
<?php	
		}
		}
	else {
		echo "<tr >
		<td colspan='5'>No Result found !</td>
		</tr>";
	}
	mysqli_close($conn);
?>

view.php

      <!DOCTYPE html>
<html lang="en">
<head>
  <title>View Ajax</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>View data</h2>
	<table class="table table-bordered table-sm" >
    <thead>
      <tr>
		<th><input type="checkbox" id="select_all"> Select </th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
		<th>City</th>
		<th>Action</th>
      </tr>
    </thead>
    <tbody id="table">
      
    </tbody>
  </table>
	<div class="row">
		<div class="col-md-2 well">
		<span class="rows_selected" id="select_count">0 Selected</span>
		<a type="button" id="delete_records" class="btn btn-primary pull-right">Delete</a>
		</div>
	</div>
</div>
<script>
$(document).ready(function() {
	$.ajax({
		url: "View_ajax.php",
		type: "POST",
		cache: false,
		success: function(dataResult){
			$('#table').html(dataResult); 
		}
	});
	/* delete selected records*/
	$('#delete_records').on('click', function(e) {
		var employee = [];
		$(".emp_checkbox:checked").each(function() {
			employee.push($(this).data('emp-id'));
		});
		if(employee.length <=0) {
			alert("Please select records."); 
		} 
		else { 
			WRN_PROFILE_DELETE = "Are you sure you want to delete "+(employee.length>1?"these":"this")+" row?";
			var checked = confirm(WRN_PROFILE_DELETE);
			if(checked == true) {
				var selected_values = employee.join(",");
				$.ajax({
					type: "POST",
					url: "delete_ajax.php",
					cache:false,
					data: 'id='+selected_values,
					success: function(response) {
						/* remove deleted employee rows*/
						var ids = response.split(",");
						for (var i=0; i < ids.length; i++ ) {	
							$("#"+ids[i]).remove(); 
						}	
					} 
				});
			} 
		} 
	});
});	
$(document).on('click', '#select_all', function() {
	$(".emp_checkbox").prop("checked", this.checked);
	$("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
});
$(document).on('click', '.emp_checkbox', function() {
	if ($('.emp_checkbox:checked').length == $('.emp_checkbox').length) {
	$('#select_all').prop('checked', true);
	} else {
	$('#select_all').prop('checked', false);
	}
	$("#select_count").html($("input.emp_checkbox:checked").length+" Selected");
});
</script>
</body>
</html>

So you learnt that “How to Delete Multiple Data using PHP and AJAX”.

❮ Previous Next ❯