Drag and Drop Table Rows using jQuery Ajax With PHP (Example)

In this blog, We will be using drag-and-drop functionality using jQuery Ajax saving the order of sorts with a PHP database. 

In this example, you will learn how to use Bootstrap just make it better layout for the table. And use jquery ui to make sortable table rows.


Lets first understand the database tables first, We will be having:


CREATE TABLE IF NOT EXISTS `blog_post` (

 

  `id` int(10) NOT NULL AUTO_INCREMENT,

 

  `title` varchar(120) NOT NULL,

 

  `description` text NOT NULL,

 

  `sort_order` int(11) NOT NULL,

  

  PRIMARY KEY (`id`)

 

) ENGINE=InnoDB;


Now, We have the table let's have an HTML page containing code for the drag-and-drop feature,


<?php

require('db.php');

?>

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

            $sql = "SELECT * FROM blog_post 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>


In this step, we will be going to update the sorting order which we will be getting from the Ajax request using PHP.

Here is the code for ajax.php

<?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++;
}
 
 
?>


I hope this will help you in the project you are working on, If you have any doubt please let me comments.