jQuery Tablesorter für das deutsche Datumsformat dd.mm.yyyy

Soeben habe ich für einen Kumpel einen Parser für den jQuery Tablesorter geschrieben, welcher das deutsche Datumsformat im Format dd.mm.yyyy verarbeiten kann. Der Parser an sich ist relativ einfach, da man einfach das Datum in einen Timestamp umwandelt und dann sortiert.

Werbung


Erstmal nur der Sorter:

$.tablesorter.addParser({
  id: 'germandate',
  is: function(s) {
          return false;
  },
  format: function(s) {
    var a = s.split('.');
    a[1] = a[1].replace(/^[0]+/g,"");
    return new Date(a.reverse().join("/")).getTime();
  },
  type: 'numeric'
});

Das komplette Beispiel sieht dann so aus:

<html>
	<head>
		<script type="text/javascript" src="jquery-latest.js"></script> 
		<script type="text/javascript" src="jquery.tablesorter.js"></script>
		<script type="text/javascript">
	  $(document).ready(function(){
	  	$.tablesorter.addParser({
			  id: 'germandate',
			  is: function(s) {
			          return false;
			  },
			  format: function(s) {
			    var a = s.split('.');
			    a[1] = a[1].replace(/^[0]+/g,"");
			    return new Date(a.reverse().join("/")).getTime();
			  },
			  type: 'numeric'
			});
	    $("#example").tablesorter({
	    		headers: { 1: { sorter:'germandate' }}
	    });
	  });
		</script>
  </head>
  <body>
		<table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
		<thead>
			<tr>
				<th class="header">Event</th>
				<th class="header">Datum</th>
			</tr>
		</thead>
		<tbody>
		<tr>
			<td>Event 1</td>
			<td>06.06.2000</td>
		</tr>
		<tr>
			<td>Event 2</td>
			<td>06.06.1992</td>
		</tr>
		<tr>
			<td>Event 3</td>
			<td>05.09.2009</td>
		</tr>
		<tr>
			<td>Event 4</td>
			<td>01.04.2002</td>
		</tr>
		<tr>
			<td>Event 5</td>
			<td>20.05.2014</td>
		</tr>
		<tr>
			<td>Event 6</td>
			<td>30.01.2001</td>
		</tr>
		</tbody>
		</table>
	</body>
</html>

Und das Beispiel nochmal gezeigt:

Event Datum
Event 1 06.06.2000
Event 2 06.06.1992
Event 3 05.09.2009
Event 4 01.04.2002
Event 5 20.05.2014
Event 6 30.01.2001

So einfach is dat 🙂

Veröffentlicht von

39 Gedanken zu „jQuery Tablesorter für das deutsche Datumsformat dd.mm.yyyy“

  1. Und auch meiner einer bedankt sich!

    (Aber was ist das denn bitte für eine Werbung „Nehmen sie der Todestest“? ;D)

  2. So einfach ist es also, wenn man weiß, wie es geht. 😉
    Hatte vorher erfolglos diverse Dinge ausprobiert.

    Meinen herzlichen Dank!!!!!

    1. Das Problem ist, dass ein neues Datumsobjekt erzeugt wird, welches nicht weiß, dass du das Jahr 2009 meinst. In diese Falle könnte man das Datum vor dem „return“ korrigieren und dann erst berechnen lassen.

  3. Hi Uli,

    vielen Dank für den Parser. Schnell rauskopieren anstatt selber zu schreiben geht einfach schneller.

    Klasse, dass es Leute gibt, die so etwas veröffentlichen.

    Weiter so + viele Grüße.

    VG, Magnus

  4. Pingback: clever-code.de by Web-Design TP » Blog Archive » PHP vs. jQuery – Tabellen sortieren
  5. TOP!!! genau was ich gesucht hatte. 1000 Dank.
    Habe es noch etwas aufgebohrt für den Fall, dass mal statt einem Datum nur Text wie z.B. „sofort“ in der Zelle steht:

    $.tablesorter.addParser({
    id: 'germandate',
    is: function(s) {
    return false;
    },
    format: function(s) {
    //alert(s.indexOf("."));
    if(s.indexOf(".")!==-1){ //<-- Bugfix bei Texteingabe wie zb sofort. String darf keinen Punkt enthalten
    var a = s.split('.');
    a[1] = a[1].replace(/^[0]+/g,"");
    return new Date(a.reverse().join("/")).getTime();
    }else{return 1;} //<-- Falls kein Punkt enthalten, gebe Wert 1 zurück
    },
    type: 'numeric'
    });

  6. Funktioniert leider nur bei einer Tabelle. Sobald man zwei Tabellen auf einer Seite hat und beide diesen Parser benutzen wollen, funktioniert es nicht mehr

      1. Danke für die Rückmeldung! Die leeren Zeilen kann man abfangen, siehe Kommentar über deinem ersten Kommenar 🙂

        Viele Grüße,
        Uli

  7. Vielen Dank für die Hilfe, genau danach habe ich gesucht.

    Der Tablesorter verlangt ja immer den genauen index, an dem die Spalte mit dem dt. Datum auftaucht. Da dies bei mir immer unterschiedlich war und ich nicht für jede Tabelle eine neue Methode aufrufen wollte, habe ich den Index anhand einer Klasse bestimmen lassen. Das th-Element mit dem deutschen Datum hat dann die Klasse „ts-date“. So kann der index dynamisch geholt werden:


    var idx = $('th.ts-date').index();
    $('table.std').tablesorter({
    headers: { idx: { sorter:'germandate' }}
    });

  8. Ich habe die Version von LULE eingebaut, denn das war genau das was ich gesucht habe.

    Leider funktioniert das im IE nicht – weiß jemand warum ??

    Mein Problem ist, ich habe eine Tabelle mit einer Spalte mit Datum im Format: DD.MM.YYYY, es sind jedoch nicht alle Zellen mit einem Datum gefüllt, d.h. es gibt auch leere Zellen ohne Inhalt. In diesem Fall funktioniert das Skript leider nicht.

    Ich habe es auch schon über einen Umweg versucht und die leeren Zellen mit „00.00.0000“ gefüllt – leider auch das ohne Erfolg.

    Über einen Hinweis würde ich mich sehr freuen!

  9. Super, vielen Dank!

    Ich habe das Problem, dass die Sortierung nur absteigend funktioniert. Klicke ich nochmals auf die Spalte, wird nicht neu sortiert.

    Was ist, wenn ich zwei bzw. mehrere Datumsspalten habe?

  10. Erstmal danke für den tollen Tipp. Ich den Parser schon im Einsatz.

    Mir fehlt nur noch ein Parser für meine letzten Spalten „Status“ und „Rendite“, wo ich einen hidden Layer drin habe und noch das Zeichen „<" bzw. bei Status muss ich noch was zaubern, weil einzelne Stati unterschiedliche Wert haben (dazu noch mit Unterstatus):
    http://www.kredit-forum.info/auxmoney-renditerechner-live-t221447.htm

    Ich bin da aber noch dran. Wer eine einfache Statussortierung sucht kann das hier nehmen:
    http://tablesorter.com/docs/example-parsers.html

    Falls noch jemand einen Filter braucht um deutsche Zahlen zu sortieren, der kann gerne das benutzen:

    $.tablesorter.addParser({
    id: "floatval",
    is: function(s) {
    return false;
    },
    format: function(s) {
    return s.replace(/\./g,"").replace(/,/g,".").replace(/[^0-9-.]/g, "");
    },
    type: "numeric"
    });

    Im ersten Schritt wird aus „- 1.000,00 EUR“ der Wert „- 1000,00 EUR“ (Punkte weg), im nächsten dann daraus „- 1000.00 EUR“ (Komma gegen Punkte ersetzen) und im letzten dann aus diesem „-1000.00“ (alles außer Zahlen, Punkte und Minuszeichen kommt weg).

    So resultiert eine schöne Floatzahl und mit der kann tablesorter wie gehabt nummerisch sortieren. 😀

    Gruß

  11. Hier mein Problemlöser für die restlichen Spalten:

    $.tablesorter.addParser({
    id: "axis",
    is: function(s) {
    return false;
    },
    format: function(s,table,cell) {
    return $(cell).attr("axis");
    },
    type: "numeric"
    });

    Einfach der Spalte ein axis Attribut mit dem gewünschten Wert hinzufügen und schon kann man nach diesem sortieren:

    BlubBlah

    Man kann auf die Art auch mehr Nachkommastellen ausgeben. axis ist übrigens dafür gedachte Spalten in Kategorien einzuteilen. Wird aber von keinem bekannten Browser unterstützt, daher kann man ihn gut dafür missbrauchen. Hauptsache valide und funktioniert 😉

    Wer will kann auch „class“ benutzen (bei „id“ muss man mit einem Buchstaben anfangen, den man aber auch mit „replace“ entfernen könnte).

    Gruß

  12. Vielen Dank, genau das brauchte ich auch. Eine Frage hierzu: Was muss ich ergänzen, wenn ich die Tabelle gleich beim Laden nach dem Datum aufsteigend sortieren möchte?
    Gruß

  13. Hi,

    bei mir kommt in der console folgende Fehlermeldung:
    a[1] is undefined

    a[1] = a[1].replace(/^[0]+/g,““);

    Ich hab das ganze in einer Ajax-basierten Suche laufen. Weiß jemand woran das liegen könnte?

    1. Hatte ich auch, bei mir waren in der Spalte auch leere Strings. Vielleicht hilfts ja jemandem:


      format: function(s) {
      if(s.length && (s.indexOf(".") !== -1)) {
      var a = s.split('.');
      a[1] = a[1].replace(/^[0]+/g,"");
      return new Date(a.reverse().join("/")).getTime();
      } else {
      return 1;
      }
      }

  14. @Tanner

    In folgender Zeile muss die Datumsspalte angegeben werden. Also 1 mit deiner Datumsspalte austauschen, bzw. die Sortierung erst nach dem Ajax Request ausführen

    headers: { 1: { sorter:’germandate‘ }}

  15. Vielen Dank! In meinem Fall brauchte ich was für das Format „14.12.1990 14:38“, habe es hierfür erweitert:

    $.tablesorter.addParser({
                            id: 'germandate',
                            is: function(s) {
                                return false;
                            },
                            format: function(s) {
                                var a = s.split(' ');
                                return (new Date(a[0].split('.').reverse().join("/")+' '+a[1]).getTime());
                            },
                            type: 'numeric'
                        });

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *