Startseite
>JavaScript
>JavaScript-Beispiele
>Eine Tabelle aus divs mit jQuery nach einer Spalte sortieren
Eine Tabelle aus divs mit jQuery nach einer Spalte sortieren
Wie sortiert man eine Tabelle, die aus div- und span-Tags besteht?
<div class="block_wrapper">
<div class="first_row">
<span class="form_heading">Name</span>
<span class="form_heading coupon_heading sort_text">E-Mail ↕</span>
<span class="form_heading coupon_heading sort_number">Anzahl ↕</span>
</div>
<div class="list_rows_wrapper">
<div class="list_row">
<span class="coupon_item">Vor- und Nachname</span>
<span class="coupon_item longer_coupon">some_email@example.com</span>
<span class="coupon_item longer_coupon">1</span>
<a href="#"><span class="delete_item green">bearbeiten</span></a>
</div>
<div class="list_row">
<span class="coupon_item">AVor- und Nachname</span>
<span class="coupon_item longer_coupon">2some_email@example.com</span>
<span class="coupon_item longer_coupon">20</span>
<a href="#"><span class="delete_item green">bearbeiten</span></a>
</div>
<div class="list_row">
<span class="coupon_item">ZVor- und Nachname</span>
<span class="coupon_item longer_coupon">28some_email@example.com</span>
<span class="coupon_item longer_coupon">2</span>
<a href="#"><span class="delete_item green">bearbeiten</span></a>
</div>
.....
</div>
</div>
<script>
var sort_as_text;
function char2Diacritic(transDiacritic)
{ // ein Buchstabe mit Akzent wird zum Grundbuchstaben mit | dahinter, so steht er direkt nach dem Grundbuchstaben
return transDiacritic.toUpperCase().normalize('NFD').replace(/\p{Diacritic}/gu, '|');
}
function sortTable(f,n){
var rows = $('.list_row').get();
rows.sort(function(a, b) {
var A = getVal(a);
if(sort_as_text){ A = char2Diacritic(A); } // Buchstaben mit Akzent (nur Text)
var B = getVal(b);
if(sort_as_text){ B = char2Diacritic(B); } // Buchstaben mit Akzent (nur Text)
if(A < B) {
return -1*f;
}
if(A > B) {
return 1*f;
}
return 0;
});
function getVal(elm){
var v = $(elm).children('.coupon_item').eq(n).text().toUpperCase();
if(sort_as_text == false){
v = parseInt(v,10);
}
return v;
}
$.each(rows, function(index, row) {
$('.list_rows_wrapper').append(row);
});
}
$( document ).ready(function() {
var f_sl = 1;
$(".coupon_heading").click(function(){
sort_as_text = $(this).hasClass( "sort_text" ); // true = sort_text ; false = sort_number
f_sl *= -1;
var n = $(this).prevAll().length;
sortTable(f_sl,n);
});
});
</script>
Tipp: Heute lassen sich Texte auch ohne eigene Umwandlung richtig sortieren – die Methode localeCompare kommt mit Umlauten und anderen Buchstaben mit Akzent zurecht, und mit einem Sprachcode richtet sie sich nach den Regeln dieser Sprache (mit 'de' steht zum Beispiel Ä direkt nach A, mit 'sv' erst nach Z). Die Vergleichsfunktion sähe dann so aus:
rows.sort(function(a, b) {
var A = getVal(a);
var B = getVal(b);
if(sort_as_text){ return A.localeCompare(B, 'de') * f; } // Texte nach den Regeln der Sprache
if(A < B) { return -1*f; }
if(A > B) { return 1*f; }
return 0;
});