Jquery - draggable sortable table rows example demo with bootstrap

By Hardik Savani | June 18, 2016 | Category : Javascript Bootstrap HTML jQuery JQuery UI

If you need to drag and drop table rows in your project then you can do it easily using jquery ui. jquery ui provide sortable(), it helps to make sortable table each row and also we can perform ajax code etc in sortable function. We can generally use when we require to change order for our product table or etc.

In this example you can learn how to drag and drop of your ravle tr using sortable() of jquery ui. I also use bootstrap that way layout become pretty. So you can see bellow example:


<html lang="en">


<title>Jquery - bootstrap Prompt modal using bootbox.js</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">



<div class="container text-center">

<h2>Jquery - Sortable table rows example</h2>

<table class="table table-bordered pagin-table">



<th width="50px">No</th>


<th width="220px">Action</th>






<td>Hardik Savani</td>

<td><a href="" class="btn btn-danger">Delete</a></td>




<td>Rajesh Savani</td>

<td><a href="" class="btn btn-danger">Delete</a></td>




<td>Haresh Patel</td>

<td><a href="" class="btn btn-danger">Delete</a></td>




<td>Vimal Patel</td>

<td><a href="" class="btn btn-danger">Delete</a></td>




<td>Harshad Pathak</td>

<td><a href="" class="btn btn-danger">Delete</a></td>





<script type="text/javascript">





Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.