Hi sagarnayak,
Please refer below code.
HTML:
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<th width="100px" style="position: relative;">
Name <a href="javascript:;" data-sort-direction="up" class="sort" style="position: absolute;
right: 5px;">
<img src="Images/no_sort.png" height="15px" /></a>
</th>
<th width="100px" style="position: relative;">
City <a href="javascript:;" data-sort-direction="up" class="sort" style="position: absolute;
right: 5px;">
<img src="Images/no_sort.png" height="15px" /></a>
</th>
</tr>
<tr>
<td>
Mahesh
</td>
<td>
Mumbai
</td>
</tr>
<tr>
<td>
Rajesh
</td>
<td>
Delhi
</td>
</tr>
<tr>
<td>
Kuldeep
</td>
<td>
Ahmedabad
</td>
</tr>
<tr>
<td>
Geeta
</td>
<td>
Rajkot
</td>
</tr>
<tr>
<td>
Heena
</td>
<td>
Pune
</td>
</tr>
</table>
JQuery:
<script type="text/javascript">
$(function () {
$(".sort").click(function () {
var link = $(this);
var index = $(this).parent("th").index();
var rows = $("table tr");
$(".sort").not(link).data("sort-direction", "up");
$(".sort img").attr("src", "/Images/no_sort.png");
if (link.data("sort-direction") == "up") {
$("img", link).attr("src", "/Images/up_arrow.png");
link.data("sort-direction", "down");
for (var i = 1; i < rows.length; i++) {
for (var j = 1; j < rows.length; j++) {
if (rows.eq(i).find("td").eq(index).html().trim() < rows.eq(j).find("td").eq(index).html().trim()) {
var rowi = rows.eq(i).html();
var rowj = rows.eq(j).html();
rows.eq(i).html(rowj);
rows.eq(j).html(rowi);
}
}
}
}
else if (link.data("sort-direction") == "down") {
$("img", link).attr("src", "/Images/down_arrow.png");
link.data("sort-direction", "up");
for (var i = 1; i < rows.length; i++) {
for (var j = 1; j < rows.length; j++) {
if (rows.eq(i).find("td").eq(index).html().trim() > rows.eq(j).find("td").eq(index).html().trim()) {
var rowi = rows.eq(i).html();
var rowj = rows.eq(j).html();
rows.eq(i).html(rowj);
rows.eq(j).html(rowi);
}
}
}
}
});
});
</script>
Screenshot
