Umschalten der Sortierung einer Spalte wird zwischen aufsteigender und absteigender
Angenommen ich habe eine Tabelle mit Feldern
Rank
,Id
undName
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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Ihre aktuelle Funktion sortiert aufsteigend, sollten Sie nur ändern Sie Ihre wenn-Anweisungen, um es zu bekommen absteigend?
Dieser funktioniert so, wie Sie wollen:
live
ist veraltet.if (ascending) { ascending = false; } else { ascending = true; }
äh...ascending = !ascending
?Würde ich wahrscheinlich wieder schreiben Sie so etwas wie dieses: http://jsfiddle.net/gQNPt/1/
HTML
Anschließend können Sie Steuern, welche Spalten sortierbar, indem die Klasse "sortable" auf den Kopf der Spalte.