La bascule de tri d'une colonne entre ascendant et descendant

Supposons que j'ai un tableau avec des champs

Rank, Id et Name

En cliquant sur le Rank , le tableau soit trié par ordre de rang dans l'ordre croissant à l'aide de ce 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;
}

Rang et Id sont des entiers avec id rank et st_id respectivement.
Donc, Ce que je veux réaliser est que quand je clique sur le champ Rang une fois, le tableau soit trié dans l'ordre croissant et cliquez de nouveau, il trie le tableau par ordre décroissant.

Je veux faire cela pour les deux champs- rank et Id. Pour la descente, je dois utiliser une fonction différente, autre que l'ascension de ce croissant fonction.

Comment puis-je réaliser cela à l'aide de jQuery et ce sort() function(not plugins)?

Voici le code 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>
La meilleure façon de le faire serait de définir un attribut de données ou un nom de classe sur votre sortable colonne indiquant comment il est actuellement en cours de tri. Puis, dans votre gestionnaire de clic, vérifier que le courant de tri et de choisir la fonction de tri à utiliser à l'époque (et mise à jour de l'attribut/classe).
Quelque chose comme ceci @Shmiddty code if($("#titre")).hasClass('desc')){ return (A == B ? 0 : (A > B ? 1 : -1)); $("#grade").removeClass('desc'); $("#grade").addClass('asc'); } else { return (A == B ? 0 : (A > B ? 1 : -1)); $("#grade").removeClass('asc'); $("#grade").addClass('desc'); }code
Il pourrait être aussi simple que d'appeler rows.reverse() quand il doit être triée dans l'ordre décroissant.
oui, c'est une bonne option à utiliser.

OriginalL'auteur Alonso | 2012-10-24

  1. 3

    Si votre fonction actuelle trie par ordre croissant, vous ne devriez avoir à changer votre si des instructions pour l'obtenir en descendant? 

    if (A > B) return -1;
if (A < B) return 1;

    Cela fonctionne de la façon dont vous le souhaitez:

    $(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;

}
    je le sais, mais comment faire pour que la "Rang" bouton à bascule de cette fonction
    Cela devrait fonctionner, mais je ne sais pas pourquoi ça ne fonctionne pas, les colonnes ne sont pas d'être triées dans l'ordre décroissant.
    pourriez-vous ajouter le code html que vous utilisez pour cela aussi, s'il vous plaît?
    live est obsolète.
    if (ascending) { ascending = false; } else { ascending = true; } euh... ascending = !ascending?

    OriginalL'auteur Angelo A

  2. 9

    Je serais probablement ré-écrire quelque chose comme ceci: 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>​

    Vous pouvez ensuite contrôler les colonnes sont triables par l'ajout de la classe "sortable" à l'en-tête de colonne.

    En bonus, cela pourrait être utilisé sur n'importe quelle table formée.
    J'ai besoin de quelque chose comme ça fait vraiment mal, merci pour le partage!

    OriginalL'auteur Shmiddty