CSV in Website implementieren

02/09/2017 21:37 NRj�#1

Hallo,

ich w�rde gerne herausfinden wie ich eine .csv in meine Website einf�ge. Ich habe hierzu ein oder mehrere Ans�tze gefunden. Eines w�re das hier: [Only registered and activated users can see links. Click Here To Register...]
Oder das: [Only registered and activated users can see links. Click Here To Register...]
Es gibt auch viele andere, die ich alle ausprobiert habe. Nur gibt es immer ein Problem: Die Tabelle wird mir im Browser nicht angezeigt. Selbst wenn ich die originalen Dateien vom Entwickler hernehme und nur die index.html �ffne. Es wir alles angezeigt nur nicht die Tabelle. Was mache ich falsch? Habe alle Browser unter Windows und Mac durchprobiert.
In der Demo wird die Tabelle angezeigt: [Only registered and activated users can see links. Click Here To Register...]

02/09/2017 21:43 Mozo_#2

Du k�nntest uns mal zeigen was du als Code hast, dann kann man auch besser sehen woran es liegen k�nnte :D

Ohne das du uns was zeigst k�nnen wir auch nur Raten :p

02/09/2017 21:47 NRj�#3

Den Code kannst du �ber die ersten beiden Links nachschauen. Aber hier noch mal:

Spoiler

HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>CSV to HTML Table</title>
    <meta name="author" content="Derek Eder">
    <meta content="Display any CSV file as a searchable, filterable, pretty HTML table" />

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dataTables.bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script type="text/javascript" src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script type="text/javascript" src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="container-fluid">

      <h2>CSV to HTML Table</h2>

      <p>Display any CSV file as a searchable, filterable, pretty HTML table. Done in 100% JavaScript. <a href='https://github.com/derekeder/csv-to-html-table'>Code on GitHub</a>.</p>

      <p>Here's a table of Health Clinics from the <a href='https://data.cityofchicago.org/browse?q=health%20clinic&sortBy=relevance&utf8=%E2%9C%93'>City of Chicago Data Portal</a>.</p>
      
      <div id='table-container'></div>

    </div><!-- /.container -->

    <footer class='footer'>
      <div class='container-fluid'>
        <hr />
        <p class='pull-right'><a href='https://github.com/derekeder/csv-to-html-table'>CSV to HTML Table</a> by <a href='http://derekeder.com'>Derek Eder</a></p>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.csv.min.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="js/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="js/csv_to_html_table.js"></script>


    <script type="text/javascript">
      function format_link(link){
        if (link)
          return "<a href='" + link + "' target='_blank'>" + link + "</a>";
        else
          return "";
      }

      CsvToHtmlTable.init({
        csv_path: 'data/Health Clinics in Chicago.csv',
        element: 'table-container', 
        allow_download: true,
        csv_options: {separator: ',', delimiter: '"'},
        datatables_options: {"paging": false},
        custom_formatting: [[4, format_link]]
      });
    </script>
  </body>
</html>

02/09/2017 21:55 False#4

Quote:

Originally Posted by NRj�

Hallo,

ich w�rde gerne herausfinden wie ich eine .csv in meine Website einf�ge. Ich habe hierzu ein oder mehrere Ans�tze gefunden. Eines w�re das hier: [Only registered and activated users can see links. Click Here To Register...]
Oder das: [Only registered and activated users can see links. Click Here To Register...]
Es gibt auch viele andere, die ich alle ausprobiert habe. Nur gibt es immer ein Problem: Die Tabelle wird mir im Browser nicht angezeigt. Selbst wenn ich die originalen Dateien vom Entwickler hernehme und nur die index.html �ffne. Es wir alles angezeigt nur nicht die Tabelle. Was mache ich falsch? Habe alle Browser unter Windows und Mac durchprobiert.
In der Demo wird die Tabelle angezeigt: [Only registered and activated users can see links. Click Here To Register...]

Habe mir den Code nicht angeguckt, hast du mal deine versuche auf einem Webspace ?
Hast du Fehler in der Konsole (f12)?

02/09/2017 21:57 florian0#5

Code:

      CsvToHtmlTable.init({
        csv_path: 'data/Health Clinics in Chicago.csv',
        element: 'table-container', 
        allow_download: true,
        csv_options: {separator: ',', delimiter: '"'},
        datatables_options: {"paging": false},
        custom_formatting: [[4, format_link]]
      });

Die Daten sollen unter data/Health Clinics in Chicago.csv liegen. Existieren diese denn bei dir? Der Pfad ist ja relativ. Wenn die vorher auf einem anderen Webspace lagen, kann das das Script ja nich wissen ...

02/09/2017 22:01 NRj�#6

Tats�chlich habe ich einen Fehler in der Konsole:

Code:

XMLHttpRequest cannot load file:///C:/Users/User/Downloads/csv-to-html-table-master/csv-to-html-table-master/data/Health%20Clinics%20in%20Chicago.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Dazu die jQuery.min.js

Spoiler

Die Tabellen liegen alle richtig.

02/09/2017 22:07 False#7

Quote:

Originally Posted by NRj�

Tats�chlich habe ich einen Fehler in der Konsole:

Code:

XMLHttpRequest cannot load file:///C:/Users/User/Downloads/csv-to-html-table-master/csv-to-html-table-master/data/Health%20Clinics%20in%20Chicago.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Dazu die jQuery.min.js

Spoiler

Die Tabellen liegen alle richtig.

Wenn ich es richtig im Kopf habe ist das ganze bei Chrome lokal nicht erlaubt.
Probier das ganze mal auf einem Webspace (gibt ja genug kostenlose).

02/10/2017 08:11 #Metho#8

Du hast auch die M�glichkeit es lokal zu machen. Einfach in der Windows Konsole das eingeben:

Code:

chrome.exe --allow-file-access-from-files