4

jQuery Tablesorter – Eurobeträge sortieren

am 04.02.2010 in jQuery, JS, Webdevelopment von Tino Dietel

Das PlugIn jQuery Tablesorter ist schon etwas in die Jahre gekommen (letztes Update im März 2008 auf Version 2.0.3), ich benutze es aber noch immer sehr gern.

Mit unseren Zahlenformaten kommt es leider nicht so ohne weiteres zurecht. So wollte ich kürzlich auch das sortieren von Beträgen in Euro(z.B. 205,20 €) ermöglichen – da schlug aber immer nur die einfache String-Sortierung an. So kommt dann beispielsweise eine Reihenfolge von 80,00 €, 912,25 €, 95,00 € heraus.

Zum Glück lässt sich der Tablesorter sehr komfortabel mittels eigener Parser erweitern. Das Grundschema ist immer gleich und übrigens auch auf der Tablesorter-Seite erklärt:

$.tablesorter.addParser({
    id: 'myParser',        // eindeutige Kennung
    is: function(s) {
        // is sollte true liefern, wenn für den Zellenwert s dieser Parser angewendet werden soll
        // ergebnis der prüfung z.B. per regex
        return true/false;
    },
    format: function(s) {
        // formatierungsfunktion - wandelt die Eingabe s in sortierbare Wert um
        return /* Ergebnis der Umwandlung */;
    },
    type: 'numeric'      // numeric oder text - wie soll sortiert werden
});

“is” ist also eine Prüfung, die für alle Zellen bei der Initialisierung durchgeführt wird. Stehen in einer Spalte nun Werte, für die diese Prüfung TRUE zurück liefert wird Tablesorter beim Sortieren unseren Parser bemühen.
“format” wandelt beim Sortieren den Wert in der Zelle in irgendetwas um was sortierbar ist – womit Tablesorter arbeiten kann.

Klingt kompliziert – also konkret für 200,00 €

jQuery.tablesorter.addParser({
    id: "euroValue",
    is: function(s) {
        // wenn die Zelle "Zahl" "Komma" "zahl" "Leerzeichen" "Euro"(\u20AC ist €) enthält wird TRUE geliefert
        return /^\d+,\d+ \u20AC$/.test(s);
    },
        format: function(s) {
        // Komma, Leerzeichen und Eurozeichen werden entfernt und das ganze als Int gewandelt
        // aus 200,12 € wird also 20012 -> wir sortieren Cent
        return jQuery.tablesorter.formatInt( s.replace(/[, \u20AC]/g,'') );
    },
    type: "numeric"
});

Nach dem gleichen Schema ließen sich dann zum Beispiel auch Spalten mit Icons sortieren, welche einen Status oder ähnliches repräsentieren.
Es muss nur der der Zelleninhalt – der ImageTag – geprüft werden. Dann kann für das Icon order_new.png eine 2 geliefert werden, für order_returned.png eine 0 – oder was auch immer.

Auch denkbar wäre, bei einer Spalte mit verschiedenen Währungen vorher eine Umrechnung auf eine gemeinsame Basis durchzuführen und diese dann sortieren zu lassen. Dazu bräuchte es nur ein Array mit den Umrechnungsfaktoren und eine kleine Anpassung in der "format"Funktion.

Einen fertigen Parser für das deutsche Datumsformat gibt es auf blogrammierer.de.

Wenn meine Ausführungen oder der Euro-Parser geholfen haben: lasst es mich wissen und empfehlt mich weiter.

Bisher 4 Kommentare

  1. Ben sagt:

    Hi,

    das war für mich wirklich hilfreich. Ich habe das jetzt noch ergänzt, da ich höhere Beträge in der Form 20.250,35 € darstelle:

    $.tablesorter.addParser({
    id: ‘euroValue’,

    is: function(s) {
    return /^\d+\.\d+,\d+ \u20AC$/.test(s);
    },

    format: function(s) {
    return jQuery.tablesorter.formatInt( s.replace(/[\., \u20AC]/g,”) );
    },

    type: ‘numeric’
    });

  2. Felix sagt:

    Genau das habe ich gesucht, vielen Dank. Jetzt muss ich mich nur nochmal nach einem Sorter für das deutsche Datum umsehen.

  3. Folker sagt:

    Danke! Durch die deutsche Kommentierung habe ich endlich habe ich das Prinzip verstanden :)

  4. christian sagt:

    sehr gut, das hilft schon mal!!!
    allerdings, was mach ich wenn ich werte wie:

    171,2 und 169,23 hab? dann is fürn tablesorter 1712 natürlich kleiner als 169,23, was kann man da machen?

    lg
    christian

Kommentieren






8 − zwei =