HTML
HTML 5

PHP - Dynamic Drag And Drop Table Rows Using JQuery Ajax

As we know, dynamic sorting or drag and drop list items or div or table rows, it's amazing things for client or any user to understand flow. If you create sorting with drag and drop able table rows or div for your product then it's awesome. So, in this post. 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.

  • 4.5/5.0
  • Last updated 08 September, 2022
  • By Admin

In this example we will use bootstrap for just make it better layout. we require to use jquery ui for make sortable table row. we will use cdn js or css for both so you don't require to download and save in your system for this example. Then we will create "sorting_items" table with id, title, description and position_order columns. we will manage it in one page using ajax. So just follow below few step to done this example. After complete all the steps. you will get preview like as bellow screen shot. You can also check demo and download full script of this post example.

Step 1: Create Database 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:
  1. <span class="pln">CREATE TABLE IF NOT EXISTS </span><span class="str">`sorting_items`</span><span class="pln"> </span><span class="pun">(</span>
  2. <span class="pln">  </span><span class="str">`id`</span><span class="pln"> </span><span class="kwd">int</span><span class="pun">(</span><span class="lit">10</span><span class="pun">)</span><span class="pln"> NOT NULL AUTO_INCREMENT</span><span class="pun">,</span>
  3. <span class="pln">  </span><span class="str">`title`</span><span class="pln"> varchar</span><span class="pun">(</span><span class="lit">120</span><span class="pun">)</span><span class="pln"> NOT NULL</span><span class="pun">,</span>
  4. <span class="pln">  </span><span class="str">`description`</span><span class="pln"> text NOT NULL</span><span class="pun">,</span>
  5. <span class="pln">  </span><span class="str">`position_order`</span><span class="pln"> </span><span class="kwd">int</span><span class="pun">(</span><span class="lit">11</span><span class="pun">)</span><span class="pln"> NOT NULL</span><span class="pun">,</span>
  6. <span class="pln">  PRIMARY KEY </span><span class="pun">(</span><span class="str">`id`</span><span class="pun">)</span>
  7. <span class="pun">)</span><span class="pln"> ENGINE</span><span class="pun">=</span><span class="typ">MyISAM</span><span class="pln">  DEFAULT CHARSET</span><span class="pun">=</span><span class="pln">latin1 AUTO_INCREMENT</span><span class="pun">=</span><span class="lit">7</span><span class="pln"> </span><span class="pun">;</span>
Step 2: Create index.php File

Here, we need to create index.php file and we will display all data and write code for sorting with drag and drop table rows. So let's create index.php file and put bellow code.

index.php
  1. <span class="dec">&lt;!DOCTYPE html&gt;</span>
  2. <span class="tag">&lt;html&gt;</span>
  3. <span class="tag">&lt;head&gt;</span>
  4. <span class="pln">    </span><span class="tag">&lt;title&gt;</span><span class="pln">Dynamic Drag and Drop table rows in PHP Mysql- codewale.com</span><span class="tag">&lt;/title&gt;</span>
  5. <span class="pln">    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1"</span><span class="tag">&gt;</span>
  6. <span class="pln">    </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="tag">&gt;</span>
  7. <span class="pln">    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span>
  8. <span class="pln">    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span>
  9. <span class="tag">&lt;/head&gt;</span>
  10. <span class="tag">&lt;body&gt;</span>
  11. <span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">&gt;</span>
  12. <span class="pln">        </span><span class="tag">&lt;h3</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-center"</span><span class="tag">&gt;</span><span class="pln">Dynamic Drag and Drop table rows in PHP Mysql - codewale.com</span><span class="tag">&lt;/h3&gt;</span>
  13. <span class="pln">        </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-bordered"</span><span class="tag">&gt;</span>
  14. <span class="pln">            </span><span class="tag">&lt;tr&gt;</span>
  15. <span class="pln">                </span><span class="tag">&lt;th&gt;</span><span class="pln">#</span><span class="tag">&lt;/th&gt;</span>
  16. <span class="pln">                </span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span>
  17. <span class="pln">                </span><span class="tag">&lt;th&gt;</span><span class="pln">Defination</span><span class="tag">&lt;/th&gt;</span>
  18. <span class="pln">            </span><span class="tag">&lt;/tr&gt;</span>
  19. <span class="pln">            </span><span class="tag">&lt;tbody</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row_position"</span><span class="tag">&gt;</span>
  20. <span class="pln">            </span><span class="pun">&lt;?</span><span class="pln">php</span>
  21. <span class="pln">            </span><span class="kwd">require</span><span class="pun">(</span><span class="str">'db_config.php'</span><span class="pun">);</span>
  22. <span class="pln">            $sql </span><span class="pun">=</span><span class="pln"> </span><span class="str">"SELECT * FROM sorting_items ORDER BY position_order"</span><span class="pun">;</span>
  23. <span class="pln">            $users </span><span class="pun">=</span><span class="pln"> $mysqli</span><span class="pun">-&gt;</span><span class="pln">query</span><span class="pun">(</span><span class="pln">$sql</span><span class="pun">);</span>
  24. <span class="pln">            </span><span class="kwd">while</span><span class="pun">(</span><span class="pln">$user </span><span class="pun">=</span><span class="pln"> $users</span><span class="pun">-&gt;</span><span class="pln">fetch_assoc</span><span class="pun">()){</span>
  25. <span class="pln">            </span><span class="pun">?&gt;</span>
  26. <span class="pln">                &lt;tr  id="</span><span class="pun">&lt;?</span><span class="pln">php echo $user</span><span class="pun">[</span><span class="str">'id'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">"&gt;</span>
  27. <span class="pln">                    </span><span class="tag">&lt;td&gt;</span><span class="pun">&lt;?</span><span class="pln">php echo $user</span><span class="pun">[</span><span class="str">'id'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="tag">&lt;/td&gt;</span>
  28. <span class="pln">                    </span><span class="tag">&lt;td&gt;</span><span class="pun">&lt;?</span><span class="pln">php echo $user</span><span class="pun">[</span><span class="str">'title'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="tag">&lt;/td&gt;</span>
  29. <span class="pln">                    </span><span class="tag">&lt;td&gt;</span><span class="pun">&lt;?</span><span class="pln">php echo $user</span><span class="pun">[</span><span class="str">'description'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="tag">&lt;/td&gt;</span>
  30. <span class="pln">                </span><span class="tag">&lt;/tr&gt;</span>
  31. <span class="pln">            </span><span class="pun">&lt;?</span><span class="pln">php </span><span class="pun">}</span><span class="pln"> </span><span class="pun">?&gt;</span>
  32. <span class="pln">            </span><span class="tag">&lt;/tbody&gt;</span>
  33. <span class="pln">        </span><span class="tag">&lt;/table&gt;</span>
  34. <span class="pln">    </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="com">&lt;!-- container / end --&gt;</span>
  35. <span class="tag">&lt;/body&gt;</span>
  36. <span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span>
  37. <span class="pln">    $</span><span class="pun">(</span><span class="pln"> </span><span class="str">".row_position"</span><span class="pln"> </span><span class="pun">).</span><span class="pln">sortable</span><span class="pun">({</span>
  38. <span class="pln">        delay</span><span class="pun">:</span><span class="pln"> </span><span class="lit">150</span><span class="pun">,</span>
  39. <span class="pln">        stop</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span>
  40. <span class="pln">            </span><span class="kwd">var</span><span class="pln"> selectedData </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Array</span><span class="pun">();</span>
  41. <span class="pln">            $</span><span class="pun">(</span><span class="str">'.row_position&gt;tr'</span><span class="pun">).</span><span class="pln">each</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span>
  42. <span class="pln">                selectedData</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">"id"</span><span class="pun">));</span>
  43. <span class="pln">            </span><span class="pun">});</span>
  44. <span class="pln">            updateOrder</span><span class="pun">(</span><span class="pln">selectedData</span><span class="pun">);</span>
  45. <span class="pln">        </span><span class="pun">}</span>
  46. <span class="pln">    </span><span class="pun">});</span>
  47. <span class="pln">    </span><span class="kwd">function</span><span class="pln"> updateOrder</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span>
  48. <span class="pln">        $</span><span class="pun">.</span><span class="pln">ajax</span><span class="pun">({</span>
  49. <span class="pln">            url</span><span class="pun">:</span><span class="str">"ajaxPro.php"</span><span class="pun">,</span>
  50. <span class="pln">            type</span><span class="pun">:</span><span class="str">'post'</span><span class="pun">,</span>
  51. <span class="pln">            data</span><span class="pun">:{</span><span class="pln">position</span><span class="pun">:</span><span class="pln">data</span><span class="pun">},</span>
  52. <span class="pln">            success</span><span class="pun">:</span><span class="kwd">function</span><span class="pun">(){</span>
  53. <span class="pln">                alert</span><span class="pun">(</span><span class="str">'your change successfully saved'</span><span class="pun">);</span>
  54. <span class="pln">            </span><span class="pun">}</span>
  55. <span class="pln">        </span><span class="pun">})</span>
  56. <span class="pln">    </span><span class="pun">}</span>
  57. <span class="tag">&lt;/script&gt;</span>
  58. <span class="tag">&lt;/html&gt;</span>
Step 3: Create Database Configuration File

In this step, we require to create database configuration file, here we will set database name, username and password. So let's create "db_config.php" file on your root directory and put bellow code:

db_config.php
  1. <span class="pun">&lt;?</span><span class="pln">php</span>
  2. <span class="pln">$mysqli </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> mysqli</span><span class="pun">(</span><span class="str">"localhost"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"root"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"root"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"laravel_test"</span><span class="pun">);</span>
  3. <span class="pun">?&gt;</span>
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
  1. <span class="pun">&lt;?</span><span class="pln">php </span>
  2. <span class="kwd">require</span><span class="pun">(</span><span class="str">'db_config.php'</span><span class="pun">);</span>
  3. <span class="pln">$position </span><span class="pun">=</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">'position'</span><span class="pun">];</span>
  4. <span class="pln">$i</span><span class="pun">=</span><span class="lit">1</span><span class="pun">;</span>
  5. <span class="kwd">foreach</span><span class="pun">(</span><span class="pln">$position </span><span class="kwd">as</span><span class="pln"> $k</span><span class="pun">=&gt;</span><span class="pln">$v</span><span class="pun">){</span>
  6. <span class="pln">    $sql </span><span class="pun">=</span><span class="pln"> </span><span class="str">"Update sorting_items SET position_order="</span><span class="pun">.</span><span class="pln">$i</span><span class="pun">.</span><span class="str">" WHERE id="</span><span class="pun">.</span><span class="pln">$v</span><span class="pun">;</span>
  7. <span class="pln">    $mysqli</span><span class="pun">-&gt;</span><span class="pln">query</span><span class="pun">(</span><span class="pln">$sql</span><span class="pun">);</span>
  8. <span class="pln">	$i</span><span class="pun">++;</span>
  9. <span class="pun">}</span>
  10. <span class="pun">?&gt;</span>

Now you are ready to run example.

You can also check demo and download full script.

I hope it can help you...

Categories

PHP (5)
Codeigniter (5)
Laravel (3)
JS (1)
Angular JS (5)
Node JS (5)
Vue JS (4)
React JS (6)
jQuery (5)
Javascript (3)
jQuery UI (6)
Wordpress (1)
Python (5)
Database (1)
MySql (5)
Mongo DB (1)
DBMS (1)
SQL (5)
HTML (1)
HTML 5 (5)
CSS (5)
Bootstrap (5)
Ajax (5)
JAVA (1)
JSON (5)
Ubuntu (5)
Server (5)
Git (3)
Google (1)
Google Map (7)
Google API (1)
Elastic Search (1)
Apache (1)
Installation (1)

Popular Tags