How to make a table jQuery sortable table using any jquery / javascript plugin?


I would like to know, how can I implement sorting or you can say change current table into jQuery sortable table using any external plugin or using jQuery UI?

Suppose this is my current HTML

<table>
    <thead>
      <tr>
       <th>Column one</th>
        <th>Column two</th>
      </tr>
    </thead>
   
    <tbody>
    <tr>
      <td>One</td>
      <td>two</td>
  
    </tr>
    <tr >
     <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Six</td>
    </tr>
   
    </tbody>
</table>

Any easy and quick example or link will help, thanks


Asked by:- jaya
0
: 2545 At:- 5/16/2018 1:02:43 PM
jQuery jquery sortable table drag and drop







1 Answers
profileImage Answered by:- neena

You can use jQuery UI sortable plugin for table sorting using drag and drop.

If your table is like below

<table >
    <thead>
      <tr>
       <th>Column one</th>
        <th>Column two</th>
      </tr>
    </thead>   
    <tbody>
    <tr>
      <td>One</td>
      <td>two</td>  
    </tr>
    <tr>
     <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Six</td>
    </tr>   
    </tbody>
</table>

You can include jQuery sortable table plugins(basically it is jQuery UI) scripts like below

<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

implement this in the table like below

$(function() {
  $( "tbody" ).sortable();
});

that's it you are done https://jsfiddle.net/66hcoxkx/

jquery-sortable-table-using-jquery-ui-min.gif

You can also call a function on every row update by calling the update function

$("tbody").sortable({        
        update: function() {
            sendOrderToServer();
        }
    });  
2
At:- 5/17/2018 10:23:05 AM
excellent answer, easy to understand for me because of the fiddle link, thanks 0
By : jaya - at :- 5/19/2018 12:21:16 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use