In this post you can find how to delete or remove multiple records using PHP Ajax with jQuery Animated effect without refresh of web page. In this tutorial for select multiple data we have use HTML checkbox input field, because by using this field we can select multiple records at the same time and based on that selection we will delete multiple mysql table data using Ajax with Animated effect using jQuery.
One of our previous post in which we have already discuss how to update multiple data using PHP Ajax with checkbox selection. By using this same concept we have make this tutorial for delete multiple data using PHP Ajax with checkbox selection. But here we have add some extra functionality like Animated effect which will increase UI appearance. So when user has select multiple data for delete or remove then he can know which data he has selected for deletion. Because once data has been deleted then it cannot be recovered. So, by using this Animated effect he can know which data he has selected for deletion purpose and it will reduce to delete wrong data by accidently.
Here we have make Live multiple records delete application using PHP Ajax jQuery and Mysql. In which you can Live delete multiple records by Checkbox selection with jQuery Animated Effect. Here for front-end Animated effect and send request to server we have use combine jQuery and Ajax and for backend for delete data from mysql database we have use PHP script. By combine all this here we have make delete multiple records in single click with Animated effect using PHP Ajax jQuery. Below you can find step by step source of this tutorial.
See Also
- Ajax Delete multiple data with checkboxes in PHP jQuery Mysql
- Create Stylish Toggles Checkboxes & Use in Form with PHP Ajax
- Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP
- Multi Tab Shopping Cart By Using PHP Ajax Jquery Bootstrap Mysql
- PHP Drag and Drop Shopping Cart by Ajax jQuery
Source Code
Create Table
Run following Sql script in your PHPMyAdmin, this script will make tbl_employee in your selected database.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_employee`
--
CREATE TABLE `tbl_employee` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`address` text NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
`age` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_employee`
--
INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`) VALUES
(5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24),
(6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26),
(7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32),
(8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29),
(174, 'Martha B. Tomlinson', '4005 Bird Spring Lane, Houston, TX 77002', 'Female', 'Systems programmer', 38),
(162, 'Jarrod D. Jones', '3827 Bingamon Road, Garfield Heights, OH 44125', 'Male', 'Manpower development advisor', 64),
(177, 'Patricia L. Scott', '1584 Dennison Street\r\nModesto, CA 95354', 'Female', 'Urban and regional planner', 54),
(181, 'Kimberly J. Ellis', '4905 Holt Street\r\nFort Lauderdale, FL 33301', 'Male', 'Dressing room attendant', 24),
(183, 'Steve John', '108, Vile Parle, CL', 'Male', 'Software Engineer', 29),
(186, 'Louis C. Charmis', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40),
(190, 'Michael Cobb', '2409 Patterson Fork Road, Westchester, IL 60154', 'Female', 'Personal secretary', 36);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=197;
database_connection.php
Once table has been created in your database, so now for make this application, you have to make database connection. For this you have to open database_connection.php file make write following code. It will make database connection.
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
?>
index.php
After making database connection, in this index.php file, first you can find code for fetch data from employee table and display on web page in table format. In this code you can check dynamic checkbox has been created for each row and in that we have store row id data. Below you can also find jquery code for checkbox selection and delete button click. When we have click on checkbox then .removeRow class has been added into particular table row, and when we have click on delete button then ajax request has been send to delete.php file. After successfully delete of data from mysql database, select table row has been remove by using jQuery fadeOut() method.
<?php
//index.php
include('database_connection.php');
$query = "SELECT * FROM tbl_employee ORDER BY id DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<html>
<head>
<title>Delete Multiple Records using PHP Ajax with Animated Effect</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://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 Ajax with Animated Effect</h3><br />
<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 width="20%">Name</th>
<th width="38%">Address</th>
<th width="7%">Gender</th>
<th width="25%">Designation</th>
<th width="5%">Age</th>
</tr>
</thead>
<?php
foreach($result as $row)
{
echo '
<tr>
<td>
<input type="checkbox" class="delete_checkbox" value="'.$row["id"].'" />
</td>
<td>'.$row["name"].'</td>
<td>'.$row["address"].'</td>
<td>'.$row["gender"].'</td>
<td>'.$row["designation"].'</td>
<td>'.$row["age"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</div>
</body>
</html>
<style>
.removeRow
{
background-color: #FF0000;
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());
});
$.ajax({
url:"delete.php",
method:"POST",
data:{checkbox_value:checkbox_value},
success:function()
{
$('.removeRow').fadeOut(1500);
}
});
}
else
{
alert("Select atleast one records");
}
});
});
</script>
delete.php
This is the last file of this source code and this file has received Ajax request for delete multiple records and it will run PHP script for delete multiple data.
<?php
//delete.php
include('database_connection.php');
if(isset($_POST["checkbox_value"]))
{
for($count = 0; $count < count($_POST["checkbox_value"]); $count++)
{
$query = "DELETE FROM tbl_employee WHERE id = '".$_POST['checkbox_value'][$count]."'";
$statement = $connect->prepare($query);
$statement->execute();
}
}
?>
This is the complete source code of this tutorial. If you have still any query regarding this post, you can tell in comment box. Keep visiting Webslesson.info for new web development tutorial.
Amazing tutorial. Can you make a tutorial on Billing system?
ReplyDeletevery nice
ReplyDeletethanks
ReplyDeleteVery very good and clear coding .... simple yet powerful ... thanks
ReplyDelete