Sortieren
Mit diesem script kann man eine Tabelle sortieren. Das script ermöglicht eine aufsteigende und absteigende Sortierung.
Nachdem man die Filterung gestartet hat, wird geschaut welche Spalte sortiert werden soll Zeile 3. In Zeile 5-6 wird die classen neu gesetzt, damit die Pfeile auch richtig angezeigt werden. Je nachdem welcher Button sichtbar ist und betätigt wurde wird auf- oder absteigend sortiert (sort-asc - sort-desc). In Zeile 24 und 42 wird die Sortierung gestartet, es wird angegeben wo sich die zu sortierenden Elemente befinden und wie die Class dieser Elemente lautet.
In den Funktionen werden die Elemente miteinander verglichen und neu sortiert. Dabei wird erst nach der zu sortierenden Spalte gesucht "$(a).find(".sort-col-" + sortCol)", anschließend wird der Wert ausgelesen ".data("sortvalue")". Der Wert darf keine HTML bzw. andere Ungültige Zeichen enthalten, das würde zu einer falschen Sortierung führen.
Anbei seht ihr eine Demo der filterung. Ich habe etwas mehr Wert eingetragen, um die Seite etwas zu füllen.
Der HTML Code
<div class="tutorial-sort">
<div class="tutorial-sort-head">
<div class="tutorial-sort-head-cell sort-direction sorted-direction sort-direction-desc" data-col="id">
<div class="js-sort sort-asc">ID <span>▲</span></div>
<div class="js-sort sort-desc">ID <span>▼</span></div>
</div>
<div class="tutorial-sort-head-cell sort-direction sort-direction-desc" data-col="firstname">
<div class="js-sort sort-asc">firstname <span>▲</span></div>
<div class="js-sort sort-desc">firstname <span>▼</span></div>
</div>
</div>
<div class="tutorial-sort-items">
<div class="tutorial-sort-item">
<div class="tutorial-sort-item-cell sort-col-id" data-sortvalue="1">
#1
</div>
<div class="tutorial-sort-item-cell sort-col-firstname" data-sortvalue="albert">
Albert
</div>
</div>
<div class="tutorial-sort-item">
<div class="tutorial-sort-item-cell sort-col-id" data-sortvalue="2">
#2
</div>
<div class="tutorial-sort-item-cell sort-col-firstname" data-sortvalue="loagen">
Loagen
</div>
</div>
</div>
</div>Der CSS Code
.js-sort{
cursor: pointer;
}
.tutorial-sort-head{
font-weight: bold;
}
.tutorial-sort-head,
.tutorial-sort-item{
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
}
.sort-direction-asc .sort-asc{
display: none;
}
.sort-direction-desc .sort-desc{
display: none;
}
.tutorial-sort-head-cell,
.tutorial-sort-item-cell{
width: 100%;
}
.js-sort span{
opacity: 0.2;
}
.sorted-direction .js-sort span{
opacity: 1;
}jQuery Code
$(document).on("click", ".js-sort", function(){
var col = $(this).closest(".sort-direction"),
sortCol = col.attr("data-col");
$(".sorted-direction").removeClass("sorted-direction");
col.removeClass("sort-direction-asc sort-direction-desc").addClass("sorted-direction");
if($(this).hasClass("sort-asc")){
col.addClass("sort-direction-asc");
function sort_asc(a, b){
var aValue = $(a).find(".sort-col-" + sortCol).data("sortvalue");
bValue = $(b).find(".sort-col-" + sortCol).data("sortvalue");
if (aValue > bValue) {
return -1;
}
if (aValue < bValue) {
return 1;
}
return 0;
}
$(".tutorial-sort-items").find(".tutorial-sort-item").sort(sort_asc).appendTo(".tutorial-sort-items");
}else{
col.addClass("sort-direction-desc");
function sort_desc(a, b){
var aValue = $(a).find(".sort-col-" + sortCol).data("sortvalue");
bValue = $(b).find(".sort-col-" + sortCol).data("sortvalue");
if (aValue > bValue) {
return 1;
}
if (aValue < bValue) {
return -1;
}
return 0;
}
$(".tutorial-sort-items").find(".tutorial-sort-item").sort(sort_desc).appendTo(".tutorial-sort-items");
}
});