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

• How to create an auto-resize Textarea in JavaScript
• array-are-true-then-return-a-true-in-javascript" title="Check if all values in an array are true then return a true in JavaScript">Check if all values in an array are true then return a true
• image-url-in-javascript" title="Verify an image URL in JavaScript">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/bootstrap@5.1.3/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>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>

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/bootstrap@5.1.3/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>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>

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..!! 🙂