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
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/
You can also call a function on every row update by calling the update
function
$("tbody").sortable({
update: function() {
sendOrderToServer();
}
});
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly