Jquery Drag and Drop Table Save into Database Using PHP

By | August 28, 2017

Jquery Drag and Drop table and save the order into Database using PHP is very simple after reading this tutorial. Our tutorial is all about how we can drag and drop the table rows and save the order into the database using the PHP. For creating a drag-gable table rows we have to use the Jquery which is very simple and easy to do. But the main tricky part is how to get the changed position of the row into your php and than save it to the Mysql Database.

In this tutorial we will crate a database table with student Information like Name, Roll No, Id, Position and add some dummy data to the table. Then we will show the database data using php over the page using the foreach loop.

We will add some sort of jquery and some php code for getting and saving the Id and Current Position Id to our Database. Lets start. –┬á ­čśŤ

Create database using Mysql

We will create a database with the name phptutorial and in that database we will create a table named “studentinfo”. You can just copy the code and paste it to your PHPMYADMIN and all the work will be handled automatically.

Add Dummy data to Database Table

As we have created the database and table we will add some dummy data to our table so that we will create the table dynamically using php and show some data over the page. Just copy and paste the data in the PHPMyadmin.

Show the data on the page using Foreach Loop

Now we have data in our database table and its time to show the dynamic data into the table using php foreach loop.

Create Jquery Drag and Drop Table Row

We will add the id to our table so that we will be able to access the table and its content using the Jquery. Now you can see that we have created Jquery drag and drop table. We will also add the dynamic Id to our tbody which will give us the

Add hidden input field into before closing <tr>

Pass Dynamic Table Id to PHP Page using Jquery

We have settled with everything and now we will pass our value to the php page using the Jquery Post method.

Save Id and Position Id to database using the PHP

We have the Id and current page id so now its time to save the table rows position into database using the PHP foreach loop.

If you have any issues, feedback please comment below or you can join us at our Youtube channel also where you can get the Videos of tutorials. Hope you enjoyed our tutorial and it will help you in your project also. You can also download the project file using the download button. Thank You Happy Coding 

TableDrag (74.5 KiB, 446 downloads)

6 thoughts on “Jquery Drag and Drop Table Save into Database Using PHP

  1. Bastian

    thanks for your tutorial.
    I get a mistake:

    Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given in

    Can you help me?

  2. shiwani

    how we can update all records in database not only position

  3. Tony Moore

    Hi Vivek. Thank You for the tutorial. I am using as my own personal home page with all my links such as search engines my sites bills etc. How do I make the names a link? I tried a few methods but no luck. Thanks in advance.

    1. Vivek Moyal Post author

      Sorry right now we dont have the demo over our server. But after your question i will soon put the demo.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.