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
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
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

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.

Vorname Name Alter Größe Geschlecht

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.

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();

oliver

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu Mit jQuery Tabelle sortieren

Wenn dir der Beitrag Mit jQuery Tabelle sortieren gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.

Hinterlasse ein Kommentar zum Beitrag "Mit jQuery Tabelle sortieren"

Deine E-Mail-Adresse wird nicht veröffentlicht.

Follow Me

doch mal auf Instagram