Mit jQuery Tabelle sortieren
Verfasst am 07.04.2020
Update 24.06.2025
In diesem Tutorial möchte ich euch zeigen, wie ihr mit jQuery Tabellen sortieren könnt. Tabellen sortieren ist immer dann nützlich, wenn man nach Werten wie Name, Temperatur, Alter, Größe oder anderen Fakten sortieren kann. So kann man dem Besuch einer Webseite für den Besucher noch interaktiver gestalten.
Tabelle mit jQuery sortieren – Example
- HTML
- JS
- CSS
HTML
<div class="tableWrapper">
<table>
<thead>
<tr>
<th class="order">Vorname</th>
<th class="order">Name</th>
<th class="order">Alter</th>
<th class="order">Größe</th>
<th class="order">Geschlecht</th>
</tr>
</thead>
<tbody>
<tr>
<td>Max</td>
<td>Müller</td>
<td>22</td>
<td>1,78</td>
<td>männlich</td>
</tr>
<tr>
<td>Lisa</td>
<td>Musterfrau</td>
<td>21</td>
<td>1,64</td>
<td>weiblich</td>
</tr>
<tr>
<td>Oliver</td>
<td>Götze</td>
<td>31</td>
<td>1,77</td>
<td>männlich</td>
</tr>
<tr>
<td>Mohammed</td>
<td>Ali</td>
<td>30</td>
<td>1,98</td>
<td>männlich</td>
</tr>
</tbody>
</table>
</div>
JS
jQuery('th.order').on('click', function() {
// add active class
if ( !jQuery(this).hasClass('active') ) {
jQuery('th.order').removeClass('active').removeClass('desc').removeClass('asc');
jQuery(this).addClass('active');
}
// Add ASC or DESC
if ( jQuery(this).hasClass('desc') ) {
jQuery(this).removeClass('desc').addClass('asc');
} else {
jQuery(this).removeClass('asc').addClass('desc');
}
// Call sort function
sort();
});
function sort() {
var table = jQuery('table');
jQuery('th.order')
.each(function() {
if ( jQuery(this).hasClass('desc') ) {
var th = jQuery(this),
thIndex = th.index(),
inverse = false;
} else {
var th = jQuery(this),
thIndex = th.index(),
inverse = true;
}
th.click(function(){
table.find('td').filter(function(){
return jQuery(this).index() === thIndex;
}).sortElements(function(a, b){
return jQuery.text([a]) > jQuery.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
return this.parentNode;
});
inverse = !inverse;
});
});
} sort();
CSS
div.tableWrapper {
padding: 24px;
}
div.tableWrapper table th {
cursor: pointer;
}
div.tableWrapper table th.active {
background: #5dd39e;
}
div.tableWrapper table th.active.asc::before,
div.tableWrapper table th.active.desc::before {
content: '<';
transform: rotate(-90deg);
display: inline-block;
margin: 0 8px;
}
div.tableWrapper table th.active.desc::before {
transform: rotate(90deg);
}
| Vorname | Name | Alter | Größe | Geschlecht |
|---|---|---|---|---|
| Max | Müller | 22 | 1,78 | männlich |
| Lisa | Musterfrau | 21 | 1,64 | weiblich |
| Oliver | Götze | 31 | 1,77 | männlich |
| Mohammed | Ali | 30 | 1,98 | männlich |
In dem einfachen Beispiel könnt Ihr alle Spaltennamen anklicken und sortieren lassen. Das jQuery reagiert nämlich auf die Klasse order. Fehlt diese dem Element th, so kann die Spalte nicht sortiert werden.
So geht’s – Tabelle sortieren
Als erstes benötigt Ihr natürlich eine Tabelle. Wenn Ihr schon eine Tabelle habt, dann gibt dem th der Spalte, die Ihr sortieren möchtet, die Klasse order an.
html
<table>
<thead>
<tr>
<th class="order">Vorname</th>
<th class="order">Name</th>
<th class="order">Alter</th>
<th class="order">Größe</th>
<th class="order">Geschlecht</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Mehr anzeigen
Installieren der jQuery sortElements Libary
Als nächstes müsst Ihr euch die jQuery Libary sortElements herunterladen und in euer Template hochladen und verlinken. Diese Libary wird uns später helfen die Tabelle zu sortieren.
Auf dem Klick des Besuchers reagieren
Nun können wir auf dem Klick des Nutzers reagieren und dem th Element die Klasse active anfügen, sowie die Art der Sortierung (ASC oder DESC). Auf diese Klassen können wir später reagieren und somit zusätzlich die Richtungspfeile hinzufügen. Anschließend rufen wir die function sort() und lassen die Tabelle sortieren.
javascript
jQuery('th.order').on('click', function() {
// add active class
if ( !jQuery(this).hasClass('active') ) {
jQuery('th.order').removeClass('active').removeClass('desc').removeClass('asc');
jQuery(this).addClass('active');
}
// Add ASC or DESC
if ( jQuery(this).hasClass('desc') ) {
jQuery(this).removeClass('desc').addClass('asc');
} else {
jQuery(this).removeClass('asc').addClass('desc');
}
// Call sort function
sort();
});
Mehr anzeigen
Function sort aufrufen
Diese Funktion sortiert die Tabelle anhand der angeklickten Spalte und arbeitet dazu mit der zuvor eingefügte sortElement.js Datei.
javascript
function sort() {
var table = jQuery('table');
jQuery('th.order')
.each(function() {
if ( jQuery(this).hasClass('desc') ) {
var th = $(this),
thIndex = th.index(),
inverse = false;
} else {
var th = $(this),
thIndex = th.index(),
inverse = true;
}
th.click(function(){
table.find('td').filter(function(){
return jQuery(this).index() === thIndex;
}).sortElements(function(a, b){
return jQuery.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
return this.parentNode;
});
inverse = !inverse;
});
});
} sort();
Mehr anzeigen
1 Like
1 Kommentar
Schreibe ein Kommentar zu Mit jQuery Tabelle sortieren
Hi Oli,
bin eben drüber „gestolpert“, copy and paste und klappt wunderbar. DANKE!
Habe den noch ein role=“button“ gegönnt (Bootstrap ist hier eingebunden), dann klappts auch gleich mit dem cursor: pointer.
Gruss Dirk