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

Von
– 5. Mai 2009Kategorie: Infotech

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.

Erstmal nur der Sorter:

PLAIN TEXT
CODE:
  1. $.tablesorter.addParser({
  2.   id: 'germandate',
  3.   is: function(s) {
  4.           return false;
  5.   },
  6.   format: function(s) {
  7.     var a = s.split('.');
  8.     a[1] = a[1].replace(/^[0]+/g,"");
  9.     return new Date(a.reverse().join("/")).getTime();
  10.   },
  11.   type: 'numeric'
  12. });

Das komplette Beispiel sieht dann so aus:

PLAIN TEXT
CODE:
  1. <html>
  2.     <head>
  3.         <script type="text/javascript" src="jquery-latest.js"></script>
  4.         <script type="text/javascript" src="jquery.tablesorter.js"></script>
  5.         <script type="text/javascript">
  6.       $(document).ready(function(){
  7.         $.tablesorter.addParser({
  8.               id: 'germandate',
  9.               is: function(s) {
  10.                       return false;
  11.               },
  12.               format: function(s) {
  13.                 var a = s.split('.');
  14.                 a[1] = a[1].replace(/^[0]+/g,"");
  15.                 return new Date(a.reverse().join("/")).getTime();
  16.               },
  17.               type: 'numeric'
  18.             });
  19.         $("#example").tablesorter({
  20.                 headers: { 1: { sorter:'germandate' }}
  21.         });
  22.       });
  23.         </script>
  24.   </head>
  25.   <body>
  26.         <table id="example" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
  27.         <thead>
  28.             <tr>
  29.                 <th class="header">Event</th>
  30.                 <th class="header">Datum</th>
  31.             </tr>
  32.         </thead>
  33.         <tbody>
  34.         <tr>
  35.             <td>Event 1</td>
  36.             <td>06.06.2000</td>
  37.         </tr>
  38.         <tr>
  39.             <td>Event 2</td>
  40.             <td>06.06.1992</td>
  41.         </tr>
  42.         <tr>
  43.             <td>Event 3</td>
  44.             <td>05.09.2009</td>
  45.         </tr>
  46.         <tr>
  47.             <td>Event 4</td>
  48.             <td>01.04.2002</td>
  49.         </tr>
  50.         <tr>
  51.             <td>Event 5</td>
  52.             <td>20.05.2014</td>
  53.         </tr>
  54.         <tr>
  55.             <td>Event 6</td>
  56.             <td>30.01.2001</td>
  57.         </tr>
  58.         </tbody>
  59.         </table>
  60.     </body>
  61. </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 :)

Schlagwörter: , ,
   

Ãœber Uli

Uli ist ein begeisterter Blogger mit Hang zur IT. Mit verschiedenen Beiträgen stellt er Gadgets vor, bringt den Lesern IT nahe und zeigt seine Photos dem Netz.