In this post we learned how to sort table rows using drag and drop jquery with ajax and PHP scripts without refreshing the web page. If you are using WordPress, you can find this type of feature in the admin control panel. With this functionality, we can easily rearrange table row data with a simple user interface. Users can also easily sort table rows using HTML and drag and drop elements.
Here we are using the JQuery UI method to drag and drop the sortable() library. With this method we can easily move HTML code from one place to another. Certain elements are automatically placed and are sort elements. However, when we update the web page, the HTML is adjusted according to its original position. However, we don't want to reposition the HTML elements and position the HTML elements using drag and drop. That's why we're using Ajax with a PHP script here. So when we have moved our HTML elements we trigger sending Ajax requests to the server with all row table IDs with indexes and updating the table row data in the PHP script according to the index position.
With this function, users can sort table rows by simply dragging and dropping HTML elements, and users can easily understand this kind of interface. If you have developed a web based application then to make it a user friendly application you need to use this type of feature and the user can easily use the application. You can find the complete source code for this tutorial as well as an online demonstration below.
PHP- Dynamic Drag & Drop table rows using jQuery AJAX
Follow This steps below
- Create Database and Table by SQL query
- Create Database Configuration File.
- Create index File and Display Sorted list.
Preview:
Step 1. Create Database and Table by SQL query
SQL query
-- Database: `webscodex`
--
-- --------------------------------------------------------
-- Table structure for table `countries`
--
CREATE TABLE `countries` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`iso` char(2) NOT NULL,
`name` varchar(80) NOT NULL,
`phonecode` int(5) NOT NULL,
`position` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `countries`
--
INSERT INTO `countries` (`id`, `iso`, `name`, `phonecode`, `position`) VALUES
(1, 'AF', 'AFGHANISTAN', 93, 152),
(2, 'AL', 'ALBANIA', 355, 137),
(3, 'DZ', 'ALGERIA', 213, 136),
(4, 'AS', 'AMERICAN SAMOA', 1684, 135),
(5, 'AD', 'ANDORRA', 376, 134),
(6, 'AO', 'ANGOLA', 244, 133),
(7, 'AI', 'ANGUILLA', 1264, 132),
(8, 'AQ', 'ANTARCTICA', 0, 131),
(9, 'AG', 'ANTIGUA AND BARBUDA', 1268, 130),
(10, 'AR', 'ARGENTINA', 54, 129),
(11, 'AM', 'ARMENIA', 374, 128),
(12, 'AW', 'ARUBA', 297, 127),
(13, 'AU', 'AUSTRALIA', 61, 126),
(14, 'AT', 'AUSTRIA', 43, 138),
(15, 'AZ', 'AZERBAIJAN', 994, 139),
(16, 'BS', 'BAHAMAS', 1242, 140),
(17, 'BH', 'BAHRAIN', 973, 151),
(18, 'BD', 'BANGLADESH', 880, 150),
(19, 'BB', 'BARBADOS', 1246, 149),
(20, 'BY', 'BELARUS', 375, 148)
Step 2. Create Database Configuration File
<?php
// Database configuration
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "webscodex";
// Create database connection
$con = new mysqli($hostname, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
?>Step 3. Create index File and Display Sorted list
<?php
// Database conneciton
include_once('config.php');
if (isset($_POST['update'])) {
$positions = $_POST['positions'];
foreach ($positions as $key => $position) {
$index = $position[0];
$newPosition = $position[1];
$query = "UPDATE countries SET position = '$newPosition' WHERE id = '$index'";
$result = $con->query($query);
}
echo "Your country position change successfully saved";
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sorting Table Row using Jquery Drag Drop with Ajax PHP</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.5.2/css/bootstrap.min.css">
</head>
<body>
<style type="text/css">
#page_list td
{
padding:16px;
background-color:#f9f9f9;
border:1px dotted #ccc;
cursor:move;
margin-top:12px;
}
</style>
<div class="card text-center" style="padding:20px;">
<h3>Sorting Table Row using Jquery Drag Drop with Ajax PHP</h3>
</div><br>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-md-offset-8">
<div class="card">
<table class="table table-bordered table-stripped table-hovered">
<thead>
<tr>
<th>Id</th>
<th>Country name</th>
<th>ISO</th>
<th>Phone code</th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT * FROM countries ORDER BY position";
$result = $con->query($query);
if ($result->num_rows > 0) {
while ($data = $result->fetch_assoc()) {
?>
<tr data-index="<?php echo $data['id'] ?>" data-position="<?php echo $data['position'] ?>"
id="page_list">
<td><?php echo $data['id'] ?></td>
<td><?php echo $data['name'] ?></td>
<td><?php echo $data['iso'] ?></td>
<td><?php echo $data['phonecode'] ?></td>
</tr>
<?php }
}else{
echo "No records found";
}?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table tbody').sortable({
update:function(event,ui){
$(this).children().each(function(index){
if($(this).attr('data-position') != (index+1)) {
$(this).attr('data-position', (index+1)).addClass('updated');
}
});
saveNewPositions();
}
});
});
function saveNewPositions(){
var positions = new Array();
$('.updated').each(function(){
positions.push([$(this).attr('data-index'), $(this).attr('data-position')]);
$(this).removeClass('updated');
});
$.ajax({
url : 'index.php',
method:'POST',
dataType: 'text',
data:{update:1,positions:positions},
success:function(result){
alert(result);
}
});
}
</script>
</body>
</html>
Post a Comment