Umschalten der Sortierung einer Spalte wird zwischen aufsteigender und absteigender

Angenommen ich habe eine Tabelle mit Feldern

Rank, Id und Name

Klick auf den Rank , die Tabelle wird sortiert nach Rang in aufsteigender Reihenfolge, mit diesem 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 und Id sind die ganzen zahlen mit der id rank und st_id beziehungsweise.
So, Was ich erreichen will ist, dass wenn ich auf Feld Rang einmal, die Tabelle wird in aufsteigender Reihenfolge sortiert und wieder Klick sortiert die Tabelle in absteigender Reihenfolge.

Ich wollen, tun Sie dies für beide Felder- rank und Id. Für den Abstieg, brauche ich eine andere Funktion andere als aufsteigender dieses aufsteigende Funktion.

Wie kann ich erreichen, das mit Hilfe von jQuery und dies sort() function(not plugins)?

Hier ist der 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>
  • Der einfachste Weg, dies zu tun wäre, um ein Daten-Attribut-oder Klassennamen auf Ihre sortierbaren Spalte, die angibt, wie es derzeit sortiert. Und dann im click-handler, prüfen Sie, was die aktuelle Sortierreihenfolge ist und wählen Sie die sort-Funktion verwenden Sie zu diesem Zeitpunkt (und aktualisieren Sie das Attribut/die Klasse).
  • So etwas wie dieses @Shmiddty code if($("#Rang")).hasClass('desc')){ return (A == B ? 0 : (A > B ? 1 : -1)); $("#Rang").removeClass('desc'); $("#Rang").addClass('asc'); } else { return (A == B ? 0 : (A > B ? 1 : -1)); $("#Rang").removeClass('asc'); $("#Rang").addClass('desc'); }code
  • Es könnte sein, so einfach wie der Aufruf von rows.reverse() sein, wenn es in absteigender Reihenfolge sortiert.
  • ja, dies ist eine gute option zu verwenden.
InformationsquelleAutor Alonso | 2012-10-24
  1. 3

    Wenn Ihre aktuelle Funktion sortiert aufsteigend, sollten Sie nur ändern Sie Ihre wenn-Anweisungen, um es zu bekommen absteigend? 

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

    Dieser funktioniert so, wie Sie wollen:

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

}
    • ich weiß, dass, aber, wie Sie, die "Rang" - Taste Umschalten auf diese Funktion
    • Es sollte funktionieren, aber weiß nicht, warum es nicht funktioniert, Spalten werden nicht immer in absteigender Reihenfolge sortiert.
    • könnten Sie fügen Sie den html verwenden Sie für diese zu finden?
    • Ich habe die html.
    • hey buddy, überprüfen meinen letzten edit. Ich habe es getestet und es funktioniert jetzt: jsbin.com/iqefoz/2/edit
    • live ist veraltet.
    • ja! Bearbeitet es. Danke
    • if (ascending) { ascending = false; } else { ascending = true; } äh... ascending = !ascending?

    InformationsquelleAutor Angelo A
  2. 9

    Würde ich wahrscheinlich wieder schreiben Sie so etwas wie dieses: 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>​

    Anschließend können Sie Steuern, welche Spalten sortierbar, indem die Klasse "sortable" auf den Kopf der Spalte.

    • Als bonus, diese könnten verwendet werden, auf einem gut-gebildeten Tisch.
    • Ich brauchte so etwas wie diese wirklich schlecht, vielen Dank für das teilen!
    InformationsquelleAutor Shmiddty
Schreibe einen Kommentar