JQuery Draggable Sortable Table Rows Example

By Hardik Savani June 6, 2023 Category : jQuery

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:

Read Also: Laravel JQuery Ajax Loading Spinner 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>

I hope it can help you...

Tags :
Previous

How To Add Remember Me Functionality to Laravel Login?
Next

How to Install Laravel on Windows Xampp Server?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares