How to create draggable sortable table rows in Jquery ?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you How to create draggable sortable table rows in Jquery ? If you have to make drag and drop table rows in your project then i hope you can do this easily by using jquery ui. In jquery ui provide us sortable(), it will helps us to make sortable table each row and also we can perform the ajax code etc in the sortable function. So we can generally use when we have to change the order for our product table or others.

Now in this example we can learn about how to drag and drop of our table tr by using sortable() of jquery ui.Here I also use the bootstrap on that way layout become more pretty.

So you can see in the 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 class="container text-center">
     <h2>Jquery - Sortable table rows example</h2>
     <table class="table table-bordered pagin-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="" class="btn btn-danger">Delete</a></td>
            </tr>
            <tr>
              <td>2</td>
              <td>Rajesh Savani</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
            <tr>
              <td>3</td>
              <td>Haresh Patel</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
            <tr>
              <td>4</td>
              <td>Vimal Patel</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
            <tr>
              <td>5</td>
              <td>Harshad Pathak</td>
              <td><a href="" class="btn btn-danger">Delete</a></td>
            </tr>
        </tbody>
    </table>
</div>	
<script type="text/javascript">
  $('tbody').sortable();
</script>
</body>
</html>

Read Also :Laravel Join with Subquery in Query Builder Example

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →