• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DataTable mit deutschem Datumsformat

P

peternmb

Mitglied
Hallo, ich schaffe es einfach nicht das auf das deutsche Datumsformat umzustellen.

So ist der Code der funktioniert, allerdings ohne die Umstellung:
Code: 
<script>
$(document).ready(function(){
$('#data-table').DataTable({
"pageLength": 25,
"language": {url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json'},
"order": [[ 0, 'des' ]],
data : <?php echo $jsonData; ?>,
columns : [
{ data : "student_id" },
{ data : "student_name" },
{ data : "student_phone" }
]
});
});
</script>
Lt. der Beschreibung erfolgt die Umstellung aufs deutsche Datum mit dieser Codezeile:
Code: 
$.fn.dataTable.moment('DD.MM.YYYY');
Wenn ich diese einfüge wird nichts mehr angezeigt, also vermutlich ein Syntaxfehler - nur wo wird das korrekt eingefügt?
Code: 
<script>
$(document).ready(function(){
$.fn.dataTable.moment('DD.MM.YYYY');
$('#data-table').DataTable({
"pageLength": 25,
"language": {url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json'},
"order": [[ 0, 'des' ]],
data : <?php echo $jsonData; ?>,
columns : [
{ data : "student_id" },
{ data : "student_name" },
{ data : "student_phone" }
]
});
});
</script>
 
Werbung:
Ich habe mir das mal angesehen und dieses:
Code: 
$.fn.dataTable.moment('DD.MM.YYYY');
nicht gefunden, aber dieses Beispiel:

DataTables example - Auto-locale display

datatables.net datatables.net
Kommt ohne Plugins und moment aus und erzeugt nicht gezielt das deutsche Format sondern das, welches der Locale des Benutzers entspricht.

Um das Datum mit führenden Nullen zu bekommen, bin ich nach diesem Beispiel vor gegangen:

DataTables example - Date rendering (Moment.js)

datatables.net datatables.net
und musste zusätzlich moment.js einbinden:
Code: 
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#example').DataTable({
                columnDefs: [
                    {
                        target: 4, /* index of column, starting at 0 */
                        render: DataTable.render.datetime('DD.MM.YYYY')
                    }
                ]
            });
        });
    </script>
Beides setzt voraus, dass das Datum im Format ISO8601 in der Tabelle vorliegt.

Versuche Mal, ob Du mit diesen Angaben zum Ziel kommst.
 
Hallo,

es werden leider keine Daten angezeigt, verm,utlich habe ich irgendwo einen SAytaxfehler drin - ich sehe aber nicht wo. Ich weiß nicht, in welchem Format das Datum vorliegt, es kommt aus der CSV-Datei in deutschem Datumsformat TT.MM.JJJJ

Hier ist mein Orginalcode der nicht funktioniert, vielleicht kannst du mir sagen wo der Fehler liegt:
Code: 
<!DOCTYPE html>
<html>
 <head>
   <title>TM-Nutzer</title>
    <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
   <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" />
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
   </head>
  <body>
  <div class="container">
   <h3 align="center">Datenbank TM-Nutzer</h3>
   <div class="table-responsive">
    <table class="table table-striped table-bordered" id="data-table">
     <thead>
      <tr>
       <th>lfd.Nr.<BR>Reg.Nr.</th>
       <th>gekauft am<BR>Service bis</th>
       <th>Verein<BR>Kontakt</th>
       <th>Ort<BR>Strasse</th>
        <th>Mail<BR>-</th>  
      </tr>
     </thead>
    </table>
   </div>
  </div>
<?php
 $file_data = fopen('TMREG.CSV', 'r');
 fgetcsv($file_data);
 $data = array();
 while($row = fgetcsv($file_data,0,$separator = ";"))
 {
  $data[] = array(
   'RegNr'  => $row[0] . "<br>" .  $row[1],
   'vom'  => $row[2] . "<br>" .  $row[3],
   'Verein'  => $row[4] . "<br>" .  $row[5],
   'Ort'  => $row[6] . "<br>" .  $row[7] ,
   'Mail'  => $row[8]
  );
 }
 $jsonData = json_encode($data);
?>
<script>
$(document).ready(function(){
   $('#data-table').DataTable({
        "pageLength": 25,
       "language": {url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json'},
       "order": [[ 0, 'des' ]],
      data  :  <?php echo $jsonData; ?>,
         columnDefs: [
          {
            target: 4, /* index of column, starting at 0 */
            render: DataTable.render.datetime('DD.MM.YYYY')
          }
        ]
     columns :  [
      { data : "RegNr" },
      { data : "vom" },
      { data : "Verein" },
      { data : "Ort" },
      { data : "Mail" }  
     ]
    });
});

</script>
</body>
</html>
 
Werbung:
Ich weiß nicht, in welchem Format das Datum vorliegt, es kommt aus der CSV-Datei in deutschem Datumsformat TT.MM.JJJJ
Zum Vergrößern anklicken....
Das verstehe ich jetzt nicht, warum willst Du es denn dann konvertieren? Ein Grund kann sein, dass die Sortierung beim deutschen Format nicht richtig funktionieren wird.
Poste doch zur Sicherheit mal eine Zeile aus der CSV-Datei nach Export.

Ich sehe jedoch auch zwei Fehler im Javascript: Da fehlt das Komma zwischen den beiden Elementen und columnDef und colums kann man sehr wahrscheinlich nicht parallel verwenden. Ändere das so:
Code: 
$(document).ready(function(){
   $('#data-table').DataTable({
        "pageLength": 25,
        "language": {url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json'},
        "order": [[ 0, 'des' ]],
        data  :  <?php echo $jsonData; ?>,
        columns :  [
            { data : "RegNr" },
            { data : "vom", render: DataTable.render.datetime('DD.MM.YYYY') },
            { data : "Verein" },
            { data : "Ort" },
            { data : "Mail" } 
         ]
    });
});
Aber zuvor müssen wir die Sache mit dem Datum klären.

Und wenn etwas nicht funktioniert und Du Syntaxfehler vermutest, sieh in die Browserkonsole, dort werden sie angezeigt.
 
Hallo,
erstmal danke, ich werde es Morgen am Rechner probieren.

Ich möchte das Datum nicht konvertieren (falls ich das so geschrieben habe war das ein Versehen) sondern meinen DataTable nach dem (deutschen) Datum sortieren können - im Moment wird das wie numerische Werte sortiert.
 
Ich möchte das Datum nicht konvertieren (falls ich das so geschrieben habe war das ein Versehen)
Zum Vergrößern anklicken....
Kann genau so gut ein Missverständnis meinerseits sein, dass ich erst dachte, es sei im ISO-Format.
Aber wenn es definitiv im deutschen Format ist, müssen wir anders vorgehen. Ich denke weiter drüber nach.
 
Werbung:
Ich habe noch etwas weiter nachgedacht und getestet. Versuche es so:
Code: 
        const data = <?php echo $jsonData; ?>;
        // Zunächst konvertieren wir das Datum in das ISO-Format
        // Hinter den Kulissen arbeitet Datatables damit,
        // z. B. beim Sortieren
        dataISO = data.map(item => {
            const
                newDate = moment(item.vom, "DD.MM.YYYY").format('YYYY-MM-DD');
            item.vom = newDate;
            return item;
        });
        $(document).ready(function () {
            $('#data-table').DataTable({
                "pageLength": 25,
                "language": { url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json' },
                "order": [[0, 'des']],
                data: dataISO,
                columns :  [
                    { data : "RegNr" },
                    // Für die Anzeige bzw. den Benutzer konvertieren wir es zurück
                    // in das deutsche Format
                    { data : "vom", render: DataTable.render.datetime('DD.MM.YYYY') },
                    { data : "Verein" },
                    { data : "Ort" },
                    { data : "Mail" }
                 ]
            });
        });
 
Zuletzt bearbeitet:
Danke werde ich Morgen testen, im Moment habe ich hier nur ein Tablet.

Seltsam, ich nutze schon mehrere DataTable, die ich mit Hilfe von dir und Bastian erstellt habe, das mit dem Datum war noch nie ein Problem...
 
Ich bekomme immer noch keine Daten angezeigt, die Meldungen dere Browserkonsole sagen mir leider absolut nichts. Hier eine Testseite:

Das ist jetzt der Code:
Code: 
<!DOCTYPE html>
<html>
 <head>
  <title>TM-Nutzer</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <h3 align="center">Datenbank TM-Nutzer</h3>
   <div class="table-responsive">
    <table class="table table-striped table-bordered" id="data-table">
     <thead>
      <tr>
       <th>lfd.Nr.<BR>Reg.Nr.</th>
       <th>gekauft am<BR>Service bis</th>
       <th>Verein<BR>Kontakt</th>
       <th>Ort<BR>Strasse</th>
        <th>Mail<BR>-</th>   
      </tr>
     </thead>
    </table>
   </div>
  </div>
<?php
 $file_data = fopen('TMREG.CSV', 'r');
 fgetcsv($file_data);
 $data = array();
 while($row = fgetcsv($file_data,0,$separator = ";"))
 {
  $data[] = array(
   'RegNr'  => $row[0] . "<br>" .  $row[1],
   'vom'  => $row[2] . "<br>" .  $row[3],
   'Verein'  => $row[4] . "<br>" .  $row[5],
   'Ort'  => $row[6] . "<br>" .  $row[7] ,
   'Mail'  => $row[8]
  );
 }
 $jsonData = json_encode($data);
?>
<script>
      const data = <?php echo $jsonData; ?>;
      // Zunächst konvertieren wir das Datum in das ISO-Format
      // Hinter den Kulissen arbeitet Datatables damit,
      // z. B. beim Sortieren
      dataISO = data.map(item => {
            const
                 newDate = moment(item.vom, "DD.MM.YYYY").format('YYYY-MM-DD');
            item.vom = newDate;
            return item;
      });
      $(document).ready(function () {
            $('#data-table').DataTable({
                 "pageLength": 25,
                 "language": { url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json' },
                 "order": [[0, 'des']],
                 data: dataISO,
                 columns :  [
                      { data : "RegNr" },
                      // Für die Anzeige bzw. den Benutzer konvertieren wir es zurück
                      // in das deutsche Format
                      { data : "vom", render: DataTable.render.datetime('DD.MM.YYYY') },
                      { data : "Verein" },
                      { data : "Ort" },
                      { data : "Mail" }
                  ]
            });
      });
</script>
</body>
</html>
 
Werbung:
Da sehe ich zwei Probleme:
  1. In der Console wird der Fehler angezeigt, dass moment nicht definiert ist. Binde es ein wie in Posting #2 angegeben.
  2. Wenn die Tabellenzellen mit dem Datum zwei Werte enthalten, kann das Sortieren nicht funktionieren. Legt man sich auf einen Wert fest, könnte man das Problem relativ leicht lösen. Wenn nicht, müsste man eine Checkbox oder zwei Radiobuttons einführen, womit umgeschaltet wird, welcher Wert für die Sortierung verwendet wird. Oder Du verwendest doch für "gekauft am" und "Service bis" zwei getrennte Spalten.
Ich vermute, zwei Werte in einer Zelle machst Du, damit die Tabelle nicht so sehr in die Breite geht?

Edit: Poste doch am besten einige Zeilen aus der CSV-Datei, damit man eine Testdatei machen kann.
 
Zuletzt bearbeitet:
Danke. Ich habe das Fehlende eingebunden damit funktioniert es.
Es wird allerdings das zweite Datum nicht angezeigt.

Ja, ich hätte es gerne mit in dieser Spalte da es mit dem anderen Datum zusammenhängt und ich die Tabelle nicht so breit haben möchte um es auch auf einem Smartphone noch lesen zu können.
Die Möglichkeit einer Sortierung nach dem zweiten Datum ist nicht notwendig.

Die Sortierung in der ersten Spalte, wo auch 2 Werte stehen funktioniert anscheinend problemlos (ist auch kein Datum...)

Die CSV-Datei sieht so aus:
lfd.Nr;RegNr;Datum;Service;Verein;Name;Ort;Str;Mail
001;301001;30.04.2005;27.04.2005;XYZ-Verein 2004;Maier Karl;;-;[email protected]
002;301002;20.04.2006;28.04.2006;Fortuna 1975;Schulz Martin;50931 Köln;Irgendwo 10;[email protected]
003;301003;25.03.2007;25.03.2011;Mein Verein;Huber Karl;50931 Köln;Irgendwo 110;[email protected]
Zum Vergrößern anklicken....
 
Dann wird das Ganze doch recht einfach. Beim Rendern gibt es mehrere Typen, "display", "sort", "filter", dadurch wird der Code viel einfacher und die Vorverarbeitung mit map kann entfallen.
Code: 
    <?php
    $file_data = fopen('TMREG.CSV', 'r');
    fgetcsv($file_data);
    $data = [];
    while ($row = fgetcsv($file_data, 0, $separator = ";")) {
        $data[] = [
            'RegNr'  => $row[0] . "<br>" .  $row[1],
            'vom'  => $row[2] . "<br>" .  $row[3],
            'Verein'  => $row[4] . "<br>" .  $row[5],
            'Ort'  => $row[6] . "<br>" .  $row[7],
            'Mail'  => $row[8]
        ];
    }
    $jsonData = json_encode($data);
    ?>
    <script>
        const
            data = <?php echo $jsonData; ?>;
        $(document).ready(function() {
            $('#data-table').DataTable({
                "pageLength": 25,
                "language": {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json'
                },
                "order": [
                    [0, 'des']
                ],
                data: data,
                columns: [{
                        data: "RegNr"
                    },
                    {
                        data: "vom",
                        // render: DataTable.render.datetime('DD.MM.YYYY')
                        render: (data, type, row, meta) => {
                            console.log(data, type, row, meta)
                            const
                                splitted = data.split('<br>'),
                                baughtOn = moment(splitted[0], 'DD.MM.YYYY').format('YYYY-MM-DD');
                            // Beim Sortieren geben wir das ISO-Format zurück
                            if (type == 'sort') return baughtOn;
                            // andernfalls das deutsche
                            return data;
                        }
                    },
                    {
                        data: "Verein"
                    },
                    {
                        data: "Ort"
                    },
                    {
                        data: "Mail"
                    }
                ]
            });
        });
    </script>
 
Zuletzt bearbeitet:
Werbung:
PERFEKT - funktionierte auf Anhieb, vielen Dank.
Genauso habe ich mir das vorgestellt, ist schon eine tolle Sache mit den DataTables.

Da ich immer weniger am PC und öfters mit dem Tablet arbeite ist es recht umständlich, um etwas nachzusehen, jedesmal den Rechner hochzufahren. Wenn ich in meiner Datenbank am Rechner etwas ändere wird jetzt beim Speichern automatisch eine CSV-Datei erstellt und hochgeladen, eine zeitliche Verzögerung ist da nicht zu spüren. Da die Filter- und Sortiermöglichkeiten der DataTables einfach und umfassend sind spare ich mir so die Arbeit noch ein zusätzliche App für das Tablet zu schreiben - genial!!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben