Jquery – draggable sortable table rows example demo with bootstrap
In this post we will give you information about Jquery – draggable sortable table rows example demo with bootstrap. Hear we will give you detail about Jquery – draggable sortable table rows example demo with bootstrapAnd how to use it also give you demo for it if it is necessary.
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:
Example:
<html lang="en">
<head>
<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">
</head>
<body>
<div >
<h2>Jquery - Sortable table rows example</h2>
<table >
<thead>
<tr>
<th width="50px">No</th>
<th>Name</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hardik Savani</td>
<td><a href="" >Delete</a></td>
</tr>
<tr>
<td>2</td>
<td>Rajesh Savani</td>
<td><a href="" >Delete</a></td>
</tr>
<tr>
<td>3</td>
<td>Haresh Patel</td>
<td><a href="" >Delete</a></td>
</tr>
<tr>
<td>4</td>
<td>Vimal Patel</td>
<td><a href="" >Delete</a></td>
</tr>
<tr>
<td>5</td>
<td>Harshad Pathak</td>
<td><a href="" >Delete</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$('tbody').sortable();
</script>
</body>
</html>
Hope this code and post will helped you for implement Jquery – draggable sortable table rows example demo with bootstrap. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs