Geek Answers Handbook

Toggle column sort between ascending and descending

Suppose I have a table with the fields 'Rank', 'Id' and 'Name'. When you click "Rank", the table is 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; }

The rank and identifier are integers with the identifier 'rank' and 'st_id', respectively. So what I want to achieve is that when I click on the Rank field once, the table is sorted in ascending order and clicks again, it sorts the table in descending order. I want to do this for both fields of rank and Id.

For descent, I need to use a function other than the upstream of this upstream function. How can I achieve this using the jquery and this () function (not plugins)? Thanks at Advance.

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>
+7
source share
2 answers

If your current function sorts it in ascending order, you only need to change your if statements to get its descent?

 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; }
+3
source

I would probably rewrite it 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 sorted by adding the "sortable" class to the column header.

+7
source

More articles:


All Articles