JQuery Sortierfunktion

vorheriger Artikel Übersicht nächster Artikel

30.08.2016

Direkt zur Definition – Direkt zum Download

Im Frontend-Bereich nutze ich wie viele andere jQuery. Hierbei gibt es immer wieder Szenarien, die das Sortieren von Elementen erfordern.
Ob es sich nun um eine Liste oder eine Tabelle handelt spielt dabei keine große Rolle. Also machte ich mich auf die Suche nach einer jQuery-Erweiterung, die mir eine kompakte und schnelle Sortierung ermöglicht. Leider konnte ich aber keine finden, die meinen Ansprüchen genügt und dabei jQuery-Konform ist. Die Ansprüche definieren sich wie folgt:

Die Verkettung der jQuery-Objekte soll erhalten bleiben.
Ein Block an Datensätzen z.B. $('ol > li') soll schnell sortiert werden.
Die zu sortierenden Elemente sollen per jQuery selektiert werden
Eine Sortierfunktion soll übergeben werden können.

Gedanken zur Grundumsetzung:

jQuery-Funktionsdefinierung mit Rückgabe des Datensatzes.
Die zu sortierenden Elemente werden aus dem DOM entnommen, sortiert und an derselben Stelle wieder eingefügt.
Die Funktion hat als ein Parameter die Sortierfunktion.

Weitere Features:

Elemente sollen auch sortierbar sein, wenn sie nicht blockweise zusammen gehören und dabei die DOM-Struktur erhalten. (hier als Inline-Sortierung genannt)
Vordefinierte Sortierfunktionen. (Text, Zahl, Integer, Float)
Selektor für Tiefensuche/-auswahl des Vergleichsdatensatzes.

Nachdem ich mir die Funktionsmerkmale überlegt hatte, ging es an die Umsetzung.

Das Ergebnis: ithSort()

ithSort ist eine jQuery-Erweiterung zum Sortieren von DOM-Elementen.

Es gibt 2 Möglichkeiten die Funktion aufzurufen, mit einer Sortierfunktion und dem Inline-Flag oder einem Options-Objekt

1. ithSort(sortFunction, inline = false)

HTML:

<ol>
    <li>2</li>
    <li>-3</li>
    <li>13</li>
    <li>49</li>
    <li>-123</li>
</ol>
 
<table id="table">
    <tr>
        <td class="value" data-value="12">...</td>
    </tr>
    <tr>
        <td class="value" data-value="122">...</td>
    </tr>
</table>

Javascript:

// Zahlen direkt im Container wählen
zahlenAufsteigend = function(a, b) {
    return $(a).text() - $(a).text();
};
 
$('ol &gt; li').ithSort(zahlenAufsteigend); // sortiert die LI Elemente aufteigend.
 
// Zahlen befinden sich im Attribute 'data-value' von '.value' Element
zahlenAbsteigend = function(a,b) {
    return ( $(a).find('.value').attr('data-value') - $(b).find('.value').data('data-value') ) * (-1);
};
 
$('#table tr').ithSort(zahlenAbsteigend); // sortiert die Zeilen der Tabelle '#table' nach den Zahlen in den data-value - Attributen der Zellen mit der Klasse 'value'

Weitere Hinweise zur richtigen Anwendung von Sortierfunktionen bietet das MDN von Mozilla.

inline (Default: false) legt fest ob das Austauschen der Elemente innerhalb der DOM-Struktur geschieht.

Wird kein Inline verwendet, werden die zu sortierenden Elemente gruppiert. Sie werden aus dem DOM entnommen, sortiert und wieder eingefügt.

Befinden sich nicht zu sortiernde Elemente zwischen den zu sortierenden Elementen wird die DOM-Struktur nicht beibehalten.

Es ist empfohlen die Inline-Option wenn möglich zu deaktivieren, da die Inline-Sortierung deutlich aufwendiger ist.

2. ithSort(options)

options ist ein Objekt mit folgenden Werten

string type (Default: “text”) definiert den Sortiertyp.
- “text”: Sortiert nach Text
- “number”: Sortiert nach Zahlen
- “int”: Sortiert nach Integer (konvertiert)
- “float” Sortiert nach Float (konvertiert)
string by (Default: “asc”) definiert die Reihenfolge.
- “asc”: aufsteigend sortiert
- “desc”: absteigend sortiert
string|jQuery-Object filter (Default: null) definiert einen Selector für den Vergleicher.
- null: Es wird der Text aus dem Container genommen, der durch den Grundselektor gegeben ist.
- Beispiel: $('#ul > li').ithSort({filter: 'strong.value', type: 'number'}); Wählt strong.value innerhalb des li als Vergleicher
boolean inline (Default: false) aktiviert die Inline-Sortierung

Fazit

ithSort erlaubt eine einfache und auch eine komplexe Sortierung, falls gefordert. Ohne die Inline-Sortierung ist sie sehr performant. Damit auch Dritte diese Funktion nutzen können um sie selbst zu verwenden oder zu Lernzwecken zu nutzen, wird sie mit der MIT Lizenz bereitgestellt.

Ich habe die Funktion noch nicht mit allen jQuery-Versionen getestet. Mit 2.x sollte es problemlos funktionieren. Falls ihr Kritik und Verbesserungsvorschläge habt oder das Skript euch einfach gefällt, könnt ihr gerne ein Kommentar hinterlassen.