Toggle sorting a column between ascending and descending

html-table, javascript, jquery, sorting

Solution

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;

}

Problem

Suppose I have a table with fields `Rank`, `Id` and `Name` 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> ```

Original source