Draggable sortable bootstrap table row using jQuery
📅February 19, 2022
If you want to implement a draggable sortable bootstrap table row then you can achieve it easily using the jQuery ui. We can generally use it when we need to change the order for any listed records.
Checkout more articles on JavaScript
- How to create an auto-resize Textarea in JavaScript
- Check if all values in an array are true then return a true
- Verify an image URL in JavaScript
- 7 JavaScript One-Liners that you should know
- Disable right click and F12 key using JavaScript
Let’s create a simple table using bootstrap for demonstration.
<title>Draggable sortable bootstrap table row using jQuery - Clue Mediator</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container text-center mt-5">
<h4>Draggable sortable bootstrap table row - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue
Mediator</a></h4>
<table class="table table-bordered pagin-table mt-3">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>DOB</th>
</tr>
</thead>
<tbody>
<tr>
<td>Katelyn T. Boyle</td>
<td>1-389-886-8523</td>
<td>[email protected]</td>
<td>07/11/1997</td>
</tr>
<tr>
<td>September Y. Forbes</td>
<td>879-4512</td>
<td>[email protected]</td>
<td>01/11/1968</td>
</tr>
<tr>
<td>Kaseem T. Potts</td>
<td>612-9561</td>
<td>[email protected]</td>
<td>11/04/1995</td>
</tr>
<tr>
<td>Maite Mcintosh</td>
<td>1-727-227-3534</td>
<td>[email protected]</td>
<td>30/08/1988</td>
</tr>
<tr>
<td>Kerry Calderon</td>
<td>1-730-492-6543</td>
<td>[email protected]</td>
<td>07/11/1973</td>
</tr>
</tbody>
</table>
</div>
Now we will use the `jquery-ui` library and the `sortable()` function to make it a draggable sortable table.
index.html
<title>Draggable sortable bootstrap table row using jQuery - Clue Mediator</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<div class="container text-center mt-5">
<h4>Draggable sortable bootstrap table row - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue
Mediator</a></h4>
<table class="table table-bordered pagin-table mt-3">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>DOB</th>
</tr>
</thead>
<tbody>
<tr>
<td>Katelyn T. Boyle</td>
<td>1-389-886-8523</td>
<td>[email protected]</td>
<td>07/11/1997</td>
</tr>
<tr>
<td>September Y. Forbes</td>
<td>879-4512</td>
<td>[email protected]</td>
<td>01/11/1968</td>
</tr>
<tr>
<td>Kaseem T. Potts</td>
<td>612-9561</td>
<td>[email protected]</td>
<td>11/04/1995</td>
</tr>
<tr>
<td>Maite Mcintosh</td>
<td>1-727-227-3534</td>
<td>[email protected]</td>
<td>30/08/1988</td>
</tr>
<tr>
<td>Kerry Calderon</td>
<td>1-730-492-6543</td>
<td>[email protected]</td>
<td>07/11/1973</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$('tbody').sortable();
</script>
Output
Run the above file and check the output.
Output - Draggable sortable bootstrap table row using jQuery - Clue Mediator
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂