Mit jQuery Tabelle sortieren
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
<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>
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 = $(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();
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 |
Keine Produkte gefunden.
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.
<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>
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.
Keine Produkte gefunden.
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 aufrufen
Diese Funktion sortiert die Tabelle anhand der angeklickten Spalte und arbeitet dazu mit der zuvor eingefügte sortElement.js Datei.
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();
Keine Produkte gefunden.
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