Sortable Table Row Using jQuery UI

Posted by & filed under Ajax, JAVASCRIPT, JQUERY, MYSQL, PHP.

In this tutorial we are going to see how to implement Sortable Table Row Using jQuery UI. This functionality enable the user to drag and drop table rows within that table container. I have integrated this drag and drop Table Row Using jQuery UI functionality in the demo of my previous tutorial Invoice System Using jQuery AutoComplete

 

Also have a look at following my exclusive Invoice Scripts which help you generate invoices and maintains your product stocks.

Invoice Script Using PHP MySQL jQuery Ajax And Boostrap – V2

 

Steps:

  1. Create basic index.html page with necessary js and css libraries added to it.
  2. Create HTML table index.html page.
  3. Integrate jQuery UI sortable functionality to HTML Table

Sortable Table Row Using jQuery UI

 

Create basic index.html page with necessary js and css libraries added to it.

First create new project named sortable-table in your htdocs/www folder. Then create index.html file and add the basic HTML markup in it. Mainly download js and CSS libraries from the following links which are needed for this functionality.

http://jquery.com/

http://jqueryui.com/

Create CSS and js folders in the sortable-table directory and put css and js files in it.

 

Copy and paste the following markup into in your index.html page.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="muni">
    <link rel="icon" href="../../favicon.ico">

    <title>Sortable Table Row Using jQuery UI</title>

    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Noto+Serif:400,700"> 
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>

  
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/auto.js"></script>
  </body>
</html>

Create HTML table index.html Page

Now copy and paste following HTML markup in between HTML body tags of index.html to create HTML table.


<div class="table-responsive">
    <table class="table table-bordered" id="invoice_table">
        <thead>
            <tr>
                <th>#</th>
                <th>Item No</th>
                <th>Item Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>3453</td>
                <td>Product 1</td>
                <td>30</td>
                <td>10</td>
                <td>300</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>3464</td>
                <td>Product 2</td>
                <td>20</td>
                <td>5</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>
</div>

Integrate jQuery UI sortable functionality to HTML Table

Now add the following jQuery script before closing of the body tag, which adds the sortable functionality to the table rows within tbody tag.


<script>
	//Sortable
	$(document).ready(function(){
		$('#invoice_table tbody').sortable({
			  axis: "Y",
			  containment: "#table_container",
			  cursor: "move",
			  delay: 150,
			  distance: 5
		});
	});
</script>

Where
Axis:

If defined, the table rows can be dragged only horizontally or vertically. Possible values: “x”, “y”.

Cursor :

Defines the cursor that is being shown while sorting.

Delay:

Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.

Distance:

Tolerance, in pixels, for when sorting should start.

 

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!