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

DataTable einsetzen

P

peternmb

Mitglied
Hallo,

ich möchte mit dem DataTable den Inhalt einer einfache CSV-Datei anzeigen bringe es aber nicht hin. Ich setze das - dank der Hilfe hier - bereits erfolgreich ein, aber komplizierter mit dem Einlesen von Dateien und schaffe es aber nicht das für eine einfache Datei zu nutzen.
Die CSV-Datei sieht z. B. so aus:
NR;Name;PLZ;Telefon
1;Peter;12345;0123-456789
 
Werbung:
Werbung:
peternmb schrieb:
Nein, habe ich nicht gelesen - ich kann da allerdings auf Anhieb auch keinen Bezug zu DataTables erkennen...
Zum Vergrößern anklicken....
Naja, irgendwie müssen die Daten ja geholt werden … Das kommt halt davon wenn man nicht verrät wo das Problem eigentlich genau liegt - da musst du schon etwas ausführlicher werden.
 
Ich bräuchte idealerweise ein kleines Codebeispiel, wie eine auf dem Server liegende CSV mit DataTables angezeigt werden kann. Feinheiten wie Formatierung, Sortierung usw. sind nicht notwendig, nur das Grundsätzliche.
 
Werbung:
Ich komme leider mit dem Beispielcode nicht zurecht.
Meine CSV liegt ja schon auf dem Server, ich müsste also in dem Beispiel den ganzen Uploadcode entfernen und den Dateinamen dere CSV-Datei irgendwie direkt übergeben.

Wenn ich es richtig verstanden habe müsste doch dieser Code genügen.
Ich weiß nur nicht, wo der Dateiname (den ich einfach ins Script unten geschrieben habe) übergeben wird.
Code: 
<html>
<head>
<title>TEST</title>
    <meta charset="utf-8">
     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
</head>
<body>
    <h2 style="font-family: Helvetica,Arial,sans-serif;">aktueller Test:</h2>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>
    <script type="text/javascript" src="jquery.dataTables.js"></script>
    <table id="events" class="display" style="width: 100%;">
        <thead>
              <tr>
                <th style="font-family: Helvetica,Arial,sans-serif; text-align: left;">Nummer</th>
                <th style="font-family: Helvetica,Arial,sans-serif; text-align: left;">Name</th>
                <th style="font-family: Helvetica,Arial,sans-serif; text-align: left;">PLZ</th>
                <th style="font-family: Helvetica,Arial,sans-serif; text-align: left;">Telefon</th>
             </tr>
        </thead>
    </table>
          
 data="TEST.CSV"
    
</body>
</html>
 
Werbung:
PHP: 
<!DOCTYPE html>
<html>
 <head>
  <title>Import CSV File into Jquery Datatables using PHP Ajax</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.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/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">
   <br />
   <h3 align="center">Import CSV File into Jquery Datatables using PHP Ajax</h3>
   <br />
   <div class="table-responsive">
    <table class="table table-striped table-bordered" id="data-table">
     <thead>
      <tr>
       <th>Student ID</th>
       <th>Student Name</th>
       <th>Phone Number</th>
      </tr>
     </thead>
    </table>
   </div>
  </div>
<?php
 $file_data = fopen('xx.csv', 'r');
 fgetcsv($file_data);
 $data = array();
 while($row = fgetcsv($file_data))
 {
  $data[] = array(
   'student_id'  => $row[0],
   'student_name'  => $row[1],
   'student_phone'  => $row[2]
  );
 }
 $jsonData = json_encode($data);
?>
<script>
$(document).ready(function(){
   $('#data-table').DataTable({
     data  :  <?php echo $jsonData; ?>,
     columns :  [
      { data : "student_id" },
      { data : "student_name" },
      { data : "student_phone" }
     ]
    });
});

</script>
</body>
</html>
 
Super, das Beispiel funktioniert - vielen Dank für die Hilfe.
Jetzt habe ich noch 2 kleinere Probleme:
wie/wo kann ich das Trennzeichen der Einträge verändern? Bei mir ist es kein Komma sondern ein Strichpunkt.
kann ich in einer Spalte auch 2 Einträge unterbringen? z.B. Ort /BR Strasse
 
Du musst folgendes ändern ...

PHP: 
while($row = fgetcsv($file_data))

in

PHP: 
while($row = fgetcsv($file_data,0,'deinTrennzeichen'))
 
Werbung:
msi schrieb:
Siehe https://www.php.net/manual/de/function.fgetcsv.php

Kann man, hängt vom Aufbau der CSV-Datei ab, ob und wie man das Script anpassen muss
Zum Vergrößern anklicken....
z.B. bei dem Beispiel oben Name und Telefon in 2 Zeilen in einer Spalte

sveka schrieb:
Du musst folgendes ändern ...
PHP: 
while($row = fgetcsv($file_data))
in
PHP: 
while($row = fgetcsv($file_data,0,'deinTrennzeichen'))
Zum Vergrößern anklicken....
funktioniert leider nicht so, aber so geht es:
Code: 
while($row = fgetcsv($file_data,0,$separator = ";"))
 
PHP: 
while($row = fgetcsv($file_data,0,$separator = ";"))
Autsch!
PHP: 
while($row = fgetcsv($file_data,0, ";"))

z.B. bei dem Beispiel oben Name und Telefon in 2 Zeilen in einer Spalte
Zum Vergrößern anklicken....
Natürlich geht das. Ändere den HTML-Tabellenkopf und beim Erzeugen des data-Array hängst du die Telefonnumer an den Namen, getrennt durch ein <br>
 
Werbung:
msi schrieb:
PHP: 
while($row = fgetcsv($file_data,0,$separator = ";"))
Autsch!
Zum Vergrößern anklicken....
Das ist korrektes PHP: der Ausdruck »$separator = ";"« gibt den Wert der Zuweisung (also das ";") zurück was also als Wert an die Funktion übergeben wird - es gibt dann halt noch die Variable $separator was natürlich überflüssig/Unsinn ist.
 
msi schrieb:
Natürlich geht das. Ändere den HTML-Tabellenkopf und beim Erzeugen des data-Array hängst du die Telefonnumer an den Namen, getrennt durch ein <br>
Zum Vergrößern anklicken....
dumme Frage, aber wie geht das mit dem anhängen?
so klappt es nicht:
Code: 
  $data[] = array(
   'student_id'  => $row[0],
   'student_name'  => $row[1] & <BR> & $row[2] 
  );
 
Du weißt aber schon, dass das absolute Basisgrundlagen sind?
PHP: 
$data[] = array(
   'student_id'  => $row[0],
   'student_name'  => $row[1] . "<br>" .  $row[2]
  );
 
Werbung:
msi schrieb:
Du weißt aber schon, dass das absolute Basisgrundlagen sind?
Zum Vergrößern anklicken....
Ja, ich habe allerdings im Normalfall mit HTML, PHP usw. so gut wie nichts zu tun.
Ich arbeite mit Windows und auch etwas mit Code für Android.

Die DataTables möchte ich nutzen um den Inhalt einer Windows-DBF-Datei auch auf meinem Tablet lesen zu können. Ich exportiere was ich brauche dann einfach als CSV - ist einfacher als wenn ich dafür z.B. eine SQL-Datenbank verwenden würde wo ich mich auch zu wenig auskenne...

Super - klappt jetzt schon <fast> alles...

Ich habe noch ein Problem mit der Codierung (Umlaute) da die CSV-Daten von Windows kommen.
Falls sich da ein Umlaut in der CSV-Datei befindet wird gar nichts nichts angezeigt.

Vielleicht gibt es da eine einfachere Lösung als wenn ich die Daten vorher konvertiere.
Es muss - da das nur für mich ist - nicht unbedingt korrekt angezeigt werden.

OK, erledigt - ich konvertiere es unter Windows nach UTF8 dann wird alles korrekt angezeigt.
DANKE

Leider immer noch ein Problem.
Bei einem anderen DataTable den ich nutze ist Datum/Sortierung auf deutsch umgstellt.
Wo bringe ich den Code hier im Script unter?
Code: 
      <script>
        $.fn.dataTable.moment('DD.MM.YYYY');
        $('#events').DataTable({
            "ajax": "Mydata.php",
                "pageLength": 25,
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json'
            },
            "order": [[ 2, 'des' ]]
         });
    </script>

Alles mögliche probiert, ich bekomme es nicht hin.
Bitte um Hilfe.

Die Umstellung auf deutsch und die Anzahl der angezeigten Einträge habe ich hinbekommen.
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>
Nur wie/wo kann ich das Datum noch auf das deutsche Datumsformat umstellen, wo muss ich den Code einfügen???
Code: 
$.fn.dataTable.moment('DD.MM.YYYY');

lt. der Beschreibung habe ich die für das Datumsformat zuständige moment-Funktion richtig eingefügt, es funktioniert aber nicht - es werden keine Daten angezeigt.
Vermutlich ein Syntaxfehler
Was mache ich falsch???
<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>
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben