Question

9

Toggle sorting a column between ascending and descending

rated 0 times [ 16] [ 7] / answers: 1 / hits: 30994 / 12 Years ago, wed, october 24, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryonk

Add To Favorites

Follow

Total Points: 161

Total Questions: 116

Total Answers: 107

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

bryonk questions

1 What is the react query queryKey typescript type

Sat, Aug 13, 22, 00:00, 2 Years ago

1 Cannot read properties of null (reading 'addEventListener') in a Javascript file (not script tag)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Pagination in React/Typescript

Sun, May 9, 21, 00:00, 3 Years ago

1 Redirect to another page with TOKEN header through Server

Tue, Mar 16, 21, 00:00, 3 Years ago

1 What JavaScript engine does Apple's Safari browser use?

Tue, Sep 29, 20, 00:00, 4 Years ago

View All

answered 12 Years ago johnnaj · Accepted Answer

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;



}