this post a user select multiple records using checkbox fields and click the delete button a loading image gif show and a successfully message display and animate effect every row selected without refresh the page
--
-- Table structure for table `employee`
--
CREATE TABLE `employee` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`position` varchar(100) NOT NULL,
`office` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`salary` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `employee`
--
INSERT INTO `employee` (`id`, `name`, `position`, `office`, `age`, `salary`) VALUES
(1, 'Caite Ednalan', 'Accountant', 'Tokyo', 36, 5689),
(2, 'Mark Oto Ednalan', 'Chief Executive Officer (CEO)', 'London', 56, 5648),
(3, 'Jacob thompson', 'Junior Technical Author', 'San Francisco', 23, 5689),
(4, 'cylde Ednalan', 'Software Engineer', 'Olongapo', 23, 54654),
(5, 'Angelica Ramos', 'Software Engineer', 'San Francisco', 26, 5465),
(6, 'Airi Satou', 'Integration Specialist', 'New York', 53, 56465),
(8, 'Tiger Nixon', 'Software Engineer', 'London', 45, 456),
(9, 'Airi Satou', 'Pre-Sales Support', 'New York', 25, 4568),
(10, 'Angelica Ramos', 'Sales Assistant', 'New York', 45, 456),
(11, 'Ashton updated', 'Senior Javascript Developer', 'Olongapo', 45, 54565),
(12, 'Bradley Greer', 'Regional Director', 'San Francisco', 27, 5485),
(13, 'Brenden Wagner', 'Javascript Developer', 'San Francisco', 38, 65468),
(14, 'Brielle Williamson', 'Personnel Lead', 'Olongapo', 56, 354685),
(15, 'Bruno Nash', 'Customer Support', 'New York', 36, 65465),
(16, 'cairocoders', 'Sales Assistant', 'Sydney', 45, 56465),
(17, 'Zorita Serrano', 'Support Engineer', 'San Francisco', 38, 6548),
(18, 'Zenaida Frank', 'Chief Operating Officer (COO)', 'San Francisco', 39, 545),
(19, 'Yuri Berry', 'Accountant', 'Tokyo', 38, 5468);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `employee`
--
ALTER TABLE `employee`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `employee`
--
ALTER TABLE `employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
//index.php
<!DOCTYPE html>
<html>
<head>
<title>Delete Multiple Records using PHP Mysql and Jquey Ajax with Animated Effect</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<div class="table-responsive">
<h3 align="center">Delete Multiple Records using PHP Mysql and Jquey Ajax with Animated Effect</h3><br />
<div id="targetLayer" class="btn btn-success" style="display:none;width:100%;margin-bottom: 10px;"></div>
<div id="loader-icon" style="display:none;"><img src="img/loader.gif" /></div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th width="5%"><button type="button" name="delete_all" id="delete_all" class="btn btn-danger btn-xs">Delete</button></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<?php
include('dbcon.php');
$result = $conn->query("SELECT * FROM employee ORDER BY id DESC");
foreach($result as $row)
{
echo '
<tr>
<td>
<input type="checkbox" class="delete_checkbox" value="'.$row["id"].'" />
</td>
<td>'.$row["name"].'</td>
<td>'.$row["position"].'</td>
<td>'.$row["office"].'</td>
<td>'.$row["age"].'</td>
<td>'.$row["salary"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</div>
<style>
.removeRow {background-color: #ff7373;color:#FFFFFF;}
</style>
<script>
$(document).ready(function(){
$('.delete_checkbox').click(function(){
if($(this).is(':checked')) {
$(this).closest('tr').addClass('removeRow');
}else{
$(this).closest('tr').removeClass('removeRow');
}
});
$('#delete_all').click(function(){
var checkbox = $('.delete_checkbox:checked');
if(checkbox.length > 0){
var checkbox_value = [];
$(checkbox).each(function(){
checkbox_value.push($(this).val());
});
$('#loader-icon').show();
$('#targetLayer').hide();
$.ajax({
url:"delete.php",
method:"POST",
data:{checkbox_value:checkbox_value},
success:function(data)
{
$('.removeRow').fadeOut(1500);
$('#loader-icon').hide();
$('#targetLayer').show();
$('#targetLayer').html(data);
}
});
}else {
alert("Select atleast one records");
}
});
});
</script>
</body>
</html>
delete.php
//delete.php
<?php
include('dbcon.php');
if(isset($_POST["checkbox_value"]))
{
for($count = 0; $count < count($_POST["checkbox_value"]); $count++)
{
$sql = "DELETE FROM employee WHERE id = '".$_POST['checkbox_value'][$count]."'";
$conn->query($sql);
}
echo "Records Succefully Deleted";
}
?>
dbcon.php
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
