In this post, We are going to know how to do Drag and Drop Table Row Sorting with Ajax and PHP script without a refresh of the page. Using this function we can quickly sort or re-order table row data with an easy user interface and Drag and Drop HTML element very useful us to a done table row sorting. Here we have used JQuery UI Drag and Drop library Sortable() function and using this function we can easily move any HTML element from one area to another and the particular element will be placed automatically and it will be sort element.
When were we have refresh a page means the HTML will be arranged according to its original place. But we don’t want to change the position of HTML element and get HTML element position as per our drag and drop. So we need to avoid this old order list, for this, whenever we move HTML element then it will fire Ajax call to a server among array list of all table row id and with the help of index order and in PHP script it will update table row order no according to the index position.
Using this method user can simply sort table row by simple Drag and Drop HTML element and a user can clearly know this kind of interface. If we have to develop any web-based application, then you may use this kind feature for make user-friendly application and user can quickly use this application.
Step 1: Database and Connect Details
Here we going to get contention with MySQL database using PHP with PDO contention property. Using this contention object we can process the Drag and Drop table row sorting using Ajax.
|
1 2 3 4 5 6 7 8 |
CREATE TABLE `li_ajax_post_load` ( `post_id` int(11) NOT NULL, `post_title` varchar(250) NOT NULL, `post_desc` text NOT NULL, `post_order_no` int(11) NOT NULL, `status` int(11) NOT NULL, PRIMARY KEY (`post_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
and connection object,
|
1 2 3 4 5 6 7 8 9 10 |
<?php //db details $db_host = 'localhost'; $db_user = 'root'; $db_pass = ''; $db_name = 'li_php_demo'; //connect and select db $con = mysqli_connect($db_host, $db_user, $db_pass, $db_name); ?> |
Step 2: Make HTML page
Here we are going to make a user view page with the post list in drag and drop element classes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="alert icon-alert with-arrow alert-success form-alter" role="alert"> <i class="fa fa-fw fa-check-circle"></i> <strong> Success ! </strong> <span class="success-message"> Post Order has been updated successfully </span> </div> <div class="alert icon-alert with-arrow alert-danger form-alter" role="alert"> <i class="fa fa-fw fa-times-circle"></i> <strong> Note !</strong> <span class="warning-message"> Empty list cant be ordered </span> </div> <ul class="list-unstyled" id="post_list"> <?php //get rows query $query = mysqli_query($con, "SELECT * FROM li_ajax_post_load ORDER BY post_order_no ASC"); //number of rows $rowCount = mysqli_num_rows($query); if($rowCount > 0){ while($row = mysqli_fetch_assoc($query)){ $tutorial_id = $row['post_id']; ?> <li data-post-id="<?php echo $row["post_id"]; ?>"> <div class="li-post-group"> <h5 class="li-post-title"><?php echo $row["post_id"].') '.ucfirst($row["post_title"]); ?></h5> <p class="li-post-desc"><?php echo ucfirst($row["post_desc"]); ?></p> </div> </li> <?php } } ?> </ul> |
Step 3: Defile Ajax Script
In this part, we need to define a jQuery function to perform Drag and Drop function scripts. It will trigger when a user drags and drop the post list in HTML then call to the server, it contains reorder or sort procedure with validation error information and displays an HTML page for user reference.
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> |
and sortable() function to perform sorting or reordering using Ajax ,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$( "#post_list" ).sortable({ placeholder : "ui-state-highlight", update : function(event, ui) { var post_order_ids = new Array(); $('#post_list li').each(function(){ post_order_ids.push($(this).data("post-id")); }); $.ajax({ url:"ajax_upload.php", method:"POST", data:{post_order_ids:post_order_ids}, success:function(data) { if(data){ $(".alert-danger").hide(); $(".alert-success ").show(); }else{ $(".alert-success").hide(); $(".alert-danger").show(); } } }); } }); |
Step 4: PHP script to filter data
Here we define a what procedures need to happen while user hit request to the server-side page. It contains reorder or sorting procedure to update the port order list for permanent post order list view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php require_once('./include/mysqli_connect.php'); $post_order = isset($_POST["post_order_ids"]) ? $_POST["post_order_ids"] : []; if(count($post_order)>0){ for($order_no= 0; $order_no < count($post_order); $order_no++) { $query = "UPDATE li_ajax_post_load SET post_order_no = '".($order_no+1)."' WHERE post_id = '".$post_order[$order_no]."'"; mysqli_query($con, $query); } echo true; }else{ echo false; } ?> |
