Menu
Suppose I have a table with fields
Rank,IdandName
On clicking the Rank , the table gets sorted by rank in ascending order using this code
$(function() {
$("#rank").click(function() {
var rows = $("#rank_table tbody tr").get();
rows.sort(sortTable);
$.each(rows, function(index, row) {
$("#rank_table").children("tbody").append(row);
});
});
});
function sortTable(a, b) {
var A = parseInt($(a).children('td').eq(0).text());
var B = parseInt($(b).children('td').eq(0).text());
if (A < B) return -1;
if (A > B) return 1;
return 0;
}
Rank and Id are integers with id rank and st_id respectively.
So, What I want to achieve is that when I click on Rank field once, table gets sorted in ascending order and again clicking it sorts the table in descending order.
I want to do this for both the fields- rank and Id. For descending, do I need to use a different function other than ascending this ascending function.
How can I achieve this using jQuery and this sort() function(not plugins)?
Here is the html
<!Doctype html>
<html>
<head>
<style>
#thead {
cursor: pointer;
text-decoration: underline;
text-align: center;
}
#tbody {
text-align: center;
}
</style>
<script src="libs/jquery-1.5.1.js" type="text/javascript"></script>
<script src="table_sort.js" type="text/javascript"></script>
</head>
<body>
<table id="rank_table">
<thead id="thead">
<tr>
<th id="rank">Rank</th>
<th id="st_id">Student_id</th>
<th id="st_name">Name</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>3</td>
<td>2</td>
<td>Ted</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>5</td>
<td>4</td>
<td>Neil</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>Alex</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>Nave</td>
</tr>
</tbody>
</table>
</body>
</html>
473
I would probably re-write it to something like this: http://jsfiddle.net/gQNPt/1/
$(".sortable").click(function(){
var o = $(this).hasClass('asc') ? 'desc' : 'asc';
$('.sortable').removeClass('asc').removeClass('desc');
$(this).addClass(o);
var colIndex = $(this).prevAll().length;
var tbod = $(this).closest("table").find("tbody");
var rows = tbod.find("tr");
rows.sort(function(a,b){
var A = $(a).find("td").eq(colIndex).text();
var B = $(b).find("td").eq(colIndex).text();
if (!isNaN(A)) A = Number(A);
if (!isNaN(B)) B = Number(B);
return o == 'asc' ? A > B : B > A;
});
$.each(rows, function(index, ele){
tbod.append(ele);
});
});
HTML
<table id="fruits">
<thead>
<tr>
<th class="sortable asc">ID</th>
<th class="sortable">Name</th>
<th class="sortable">Rank</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>Banana</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>Pear</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>6</td>
</tr>
<tr>
<td>3</td>
<td>Apple</td>
<td>14</td>
</tr>
<tr>
<td>4</td>
<td>Mango</td>
<td>99</td>
</tr>
</tbody>
</table>
You can then control which columns are sortable by adding the class "sortable" to the column header.
139
If your current function sorts it ascending, you should only have to change your if statements to get it descending?
if (A > B) return -1;
if (A < B) return 1;
This works the way you want:
$(function() {
$("#rank").on('click', function() {
var rows = $("#rank_table tbody tr").get();
rows.sort(sortTable);
$.each(rows, function(index, row) {
$("#rank_table").children("tbody").append(row);
});
if (ascending) {
ascending = false;
} else {
ascending = true;
}
});
});
var ascending = false;
function sortTable(a, b) {
var A = parseInt($(a).children('td').eq(0).text(), 10);
var B = parseInt($(b).children('td').eq(0).text(), 10);
if (ascending) {
if (A > B) return 1;
if (A < B) return -1;
} else {
if (A > B) return -1;
if (A < B) return 1;
}
return 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
