Sortable Table Row Using jQuery UI
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:
- Create basic index.html page with necessary js and css libraries added to it.
- Create HTML table index.html page.
- Integrate jQuery UI sortable functionality to HTML Table
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.
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>
Download jQuery UI Autocomplete Script
Refer this video tutorial series on jQuery autocomplete right from the scratch : jQuery UI Autocomplete Video Tutorials
Learn jQuery Autocomplete in 3 Minutes
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
