Dynamic Drag and Drop table rows using JQuery Ajax

We are going to use JQuery Ajax so that we can drag and drop rows of a table dynamically. If any user or client want to understand the flow of drag and drop list items, table rows, div, or dynamic sorting, it will be a very interacting thing for them to understand. In our example, we will use JQuery UI so that we can create drag and drop rows of a table. We will also use PHP so that we can make it dynamic. Basically, we are going to use JQuery Ajax to save our data into the database.

If we want to make an attractive and better layout, it is possible by using the Bootstrap. We can also develop a sortable table row by using the JQuery UI. In our example, we don't have to download and save on our computer because we are going to CSS or cdn js for both. After that, we will create a table named "sorting_items", which will contain the title, id, position_order, and description columns. We can use Ajax to put all these things on one page. For this, we will follow the step by step process, which is described as follows:

Step 1:

This is the first step, and in this step, we are going to Create Database table. In our example, we require a table and database both that's why we will create both. We will create a table named "sorting_items" and a database named "laravel_test", which will contain the columns id and name. We are going to use the below sql query to create the "sorting_items" table.

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) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

Step 2:

In this step, we will Create index.php file. Here all the data will be display and we will perform sorting by writing the following code. We will sort the table row by using the drag and drop. So we are going to create index.php file and then we will add the following code:

index.php

<!DOCTYPE html>
<html>
<head>
    <title> Example of 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">
    <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"> Example of Dynamic Drag and Drop table rows in PHP Mysql </h3>
        <table class="table table-bordered">
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Defination</th>
            </tr>
            <tbody class="row_position">
            <?php

            require('db_config.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:"ajaxPro.php",
            type:'post',
            data:{position:data},
            success:function(){
                alert('your change successfully saved');
            }
        })
    }
</script>
</html>

Step 3:

Now, we will Create Database Configuration file. For this, the name, username, and password of the database will be set. We will use our root directory to create the file "db_config.php". For this creation, we will put the following code:

db_config.php

<?php

$mysqli = new mysqli("localhost", "root", "root", "laravel_test");

?>

Step 4:

This is the last step, in this step, we are going to Create ajaxPro.pho file. We will save our data by creating the Ajax file. So we are going to create an ajaxPro.php file, and then we will add the following code:

ajaxPro.php

<?php 

require('db_config.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++;
}

?>

Now the above code is ready to run. The output of the above code is as follows: