Dynamic drag and drop table rows in PHP Mysql using jquery ajax. In this tutorial, you will learn how to create dynamic drag and drop table rows in PHP Mysql using jquery ajax.
In this example you will learn how to use bootstrap for just make it better layout for table. And use jquery ui for make sortable table row.
Note that, you can use cdn js or css for both so you don’t require to download and save in your system for this example.
After that, you will create “sorting_items” table with id, title, description and position_order columns. And manage it in one page using ajax.
Dynamic Drag and Drop Table Rows in PHP MySQL using jQuery Ajax
If you want to create dynamic drag and drop table rows in php mysql using ajax without reloading the web page, so follow the following steps:
- Step 1 – Create Database And Table
- Step 2 – Connecting to MySQL database
- Step 3 – Create Drag and Drop Html
- Step 4 – Create Ajax.php
Step 1 – Create Database And Table
First of all, navigate to your phpmyadmin panel and create database and table using the following sql queries:
CREATE TABLE IF NOT EXISTS `sorting_items` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(120) NOT NULL,
`description` text NOT NULL,
`position_order` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
Step 2 – Connecting to MySQL database
In this step, you will create a file name db.php and update the below code into your file.
The following code is used to create a MySQL database connection in PHP. And also, you can use this php code for fetch, insert, update or delete records from MySQL database with and without ajax:
<?php
$host='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($host,$username,$password,"$dbname");
if(!$conn)
{
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Step 3 – Create Drag and Drop Html
In this step, display data in an HTML table and also drag drop it.
So, create index.php file and add the following code into file:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Drag and Drop table rows in PHP Mysql- Tutsmake.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<h3 class="text-center">Dynamic Drag and Drop table rows in PHP Mysql - Tutsmake.com</h3>
<table class="table table-bordered">
<tr>
<th>#</th>
<th>Name</th>
<th>Defination</th>
</tr>
<tbody class="row_position">
<?php
require('db.php');
$sql = "SELECT * FROM sorting_items ORDER BY position_order";
$users = $mysqli->query($sql);
while($user = $users->fetch_assoc()){
?>
<tr id="<?php echo $user['id'] ?>">
<td><?php echo $user['id'] ?></td>
<td><?php echo $user['title'] ?></td>
<td><?php echo $user['description'] ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div> <!-- container / end -->
</body>
<script type="text/javascript">
$( ".row_position" ).sortable({
delay: 150,
stop: function() {
var selectedData = new Array();
$('.row_position>tr').each(function() {
selectedData.push($(this).attr("id"));
});
updateOrder(selectedData);
}
});
function updateOrder(data) {
$.ajax({
url:"ajax.php",
type:'post',
data:{position:data},
success:function(){
alert('your change successfully saved');
}
})
}
</script>
</html>
Step 4 – Create Ajax.php
In this step, fetch data from the database using ajax request. So create ajax.php file and drag drop table data in html, then insert it into the database using ajax without refresh or reload the whole web page.
So, update the following code into ajax.php file:
<?php
require('db.php');
$position = $_POST['position'];
$i=1;
foreach($position as $k=>$v){
$sql = "Update sorting_items SET position_order=".$i." WHERE id=".$v;
$mysqli->query($sql);
$i++;
}
?>
Conclusion
Dynamic drag and drop table rows in php mysql using jquery ajax. In this tutorial, you have learned how to create dynamic drag and drop table rows in php mysql using jquery ajax without reload or refresh the whole web page.
