<script type="text/javascript">
var people, asc1 = 1,
asc2 = 1,
asc3 = 1;
window.onload = function () {
people = document.getElementById("people");
}
function sort_table(tbody, col, asc) {
var rows = tbody.rows,
rlen = rows.length,
arr = new Array(),
i, j, cells, clen;
// fill the array with values from the table
for (i = 0; i < rlen; i++) {
cells = rows[i].cells;
clen = cells.length;
arr[i] = new Array();
for (j = 0; j < clen; j++) {
arr[i][j] = cells[j].innerHTML;
}
}
// sort the array by the specified column number (col) and order (asc)
arr.sort(function (a, b) {
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 * asc);
});
// replace existing rows with new rows created from the sorted array
for (i = 0; i < rlen; i++) {
rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
}
}
</script>
<table>
<thead>
<tr>
<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1;">Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
</thead>
<tbody id="people">
<tr>
<td>Raja</td>
<td>Dey</td>
<td>18</td>
</tr>
<tr>
<td>Mamata</td>
<td>Sharma</td>
<td>20</td>
</tr>
<tr>
<td>Avijit</td>
<td>Sharma</td>
<td>21</td>
</tr>
<tr>
<td>Sharanya</td>
<td>Dutta</td>
<td>26</td>
</tr>
<tr>
<td>Nabin</td>
<td>Roy</td>
<td>27</td>
</tr>
</tbody>
</table>
