Draggable sortable bootstrap table row using jQuery
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
Let’s create a simple table using bootstrap for demonstration.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <html lang="en"> <head> <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"> </head> <body> <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>mi.lacinia@laciniamattis.edu</td> <td>07/11/1997</td> </tr> <tr> <td>September Y. Forbes</td> <td>879-4512</td> <td>Proin.mi.Aliquam@arcuVestibulum.org</td> <td>01/11/1968</td> </tr> <tr> <td>Kaseem T. Potts</td> <td>612-9561</td> <td>tempus.lorem@luctussitamet.org</td> <td>11/04/1995</td> </tr> <tr> <td>Maite Mcintosh</td> <td>1-727-227-3534</td> <td>sagittis.Duis@tellusPhaselluselit.net</td> <td>30/08/1988</td> </tr> <tr> <td>Kerry Calderon</td> <td>1-730-492-6543</td> <td>Integer.sem@nisi.org</td> <td>07/11/1973</td> </tr> </tbody> </table> </div> </body> </html> |
Now we will use the jquery-ui library and the sortable() function to make it a draggable sortable table.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <html lang="en"> <head> <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> </head> <body> <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>mi.lacinia@laciniamattis.edu</td> <td>07/11/1997</td> </tr> <tr> <td>September Y. Forbes</td> <td>879-4512</td> <td>Proin.mi.Aliquam@arcuVestibulum.org</td> <td>01/11/1968</td> </tr> <tr> <td>Kaseem T. Potts</td> <td>612-9561</td> <td>tempus.lorem@luctussitamet.org</td> <td>11/04/1995</td> </tr> <tr> <td>Maite Mcintosh</td> <td>1-727-227-3534</td> <td>sagittis.Duis@tellusPhaselluselit.net</td> <td>30/08/1988</td> </tr> <tr> <td>Kerry Calderon</td> <td>1-730-492-6543</td> <td>Integer.sem@nisi.org</td> <td>07/11/1973</td> </tr> </tbody> </table> </div> <script type="text/javascript"> $('tbody').sortable(); </script> </body> </html> |
Output
Run the above file and check the output.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
