PHP - Dynamic Drag and Drop table rows using JQuery Ajax with MySQL

Jquery , PHP

Nicesnippets

1187

23-12-2020


PHP - Dynamic Drag and Drop table rows using JQuery Ajax with MySQL

Hi Guys,

In this blog, I am going to show you how to create dynamic drag and drop table rows in with jquery ajax in php mysql. We will create sorting with drag and drop able table rows using jquery ajax in php mysql.

In this article. i would like to share with you how to create drag and drop table rows using jquery ui and also we will make it dynamic using php. so basically we will save data into database using jquery ajax.

Here I will give you full example for php dynamic drag and drop table rows using jquery ajax with mysql. So let's follow bellow step by step:

Step 1 : Create Sorting Items Table


In fist step, we need to create database and table, so here i created "laravel_test" database and "sorting_items" table with id and name column. You can simply create "sorting_items" table as following sql query.

SQL Query:

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) NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7;

Step 2 : Database Configuration config.php

Now, We will setup database configuration in one file as dbConfig.php file and fill the bellow inforamtion as your database inforamtion.

dbConfig.php

<?php

$host = "localhost"; /* Host name */

$user = "root"; /* User */

$password = "root"; /* Password */

$dbname = "test"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection

if (!$con) {

die("Connection failed: " . mysqli_connect_error());

}

Step 3 : Create index.php File

In this step, You can create table for show all table data So let's put the bellow code :

index.php

<!DOCTYPE html>

<html>

<head>

<title>Dynamic Drag and Drop Table Rows In PHP Mysql</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">

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">

<style type="text/css">

body{

background:#d1d1d2;

}

.mian-section{

padding:20px 60px;

margin-top:100px;

background:#fff;

}

.title{

margin-bottom:50px;

}

.label-success{

position: relative;

top:20px;

}

</style>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-md-8 col-md-offset-2 mian-section">

<h3 class="text-center title">Dynamic Drag and Drop Table Rows In PHP Mysql <label class="label label-success">nicesnippets.com</label></h3>

<table class="table table-bordered">

<tr>

<th>Id</th>

<th>Name</th>

<th>Description</th>

</tr>

<tbody class="row_position">

<?php

require('dbConfig.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>

</div>

</div>

<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

<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:"ajaxPro.php",

type:'post',

data:{position:data},

success:function(data){

toastr.success('Your Change Successfully Saved.');

}

})

}

</script>

</body>

</html>

Step 4 : Create ajaxPro.php File

In last step, we will create ajax file for save data in order. So let's create ajaxPro.php and put below code:

ajaxPro.php

<?php

// Include Connection File

require('dbConfig.php');

$position = $_POST['position'];

$i=1;

// Update Orting Data

foreach($position as $k=>$v){

$sql = "Update sorting_items SET position_order=".$i." WHERE id=".$v;

$mysqli->query($sql);

$i++;

}

?>

It will help you...


Recommended Posts