Skip to content

All topics  /  jQuery

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

jQuery ·

When “PHP - Dynamic Drag and Drop table rows using JQuery Ajax with MySQL” moves through design, development and browser testing, x must have qualities good manager can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

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

More on this topic