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

Apr 24, 2021 . Admin

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 utilizing jquery ajax in php mysql.

In this article. i would like to apportion with you how to create drag and drop table rows using jquery ui and also we will make it dynamic utilizing php. so rudimentally we will preserve data into database utilizing 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.

config.php

<?php

    $host = "localhost"; /* Host name */
    $user = "root"; /* User */
    $password = "root"; /* Password */
    $dbname = "php_curd"; /* 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 - mywebtuts.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">
    <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">mywebtuts.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('config.php');
                        $sql = "SELECT * FROM sorting_items ORDER BY position_order";
                        $users = $con->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:

<?php

    // Include Connection File 
    require('config.php');

    $position = $_POST['position'];

    $i=1;

    // Update Orting Data 
    foreach($position as $k=>$v){

        $query = "UPDATE sorting_items SET position_order = '".$i."' WHERE id = '".$v."'";
        $con->query($query);

        $i++;
    }

?>

It will help you..

#PHP

You might also like...