Wie man Daten von .csv in Datentabelle lädt?

Ich versuche, this table zu verwenden, um Tabelle anzuzeigen, die Daten enthält, die aus einer CSV-Datei geladen werden.Wie man Daten von .csv in Datentabelle lädt?

Gibt es eine Möglichkeit, Daten von .csv in this table mit der Möglichkeit der bedingten Formatierung zu laden?

Danke!

Der folgende Code ist soweit wie bisher konnte der Tabellenkörper <tbody> von der Tabelle getrennt werden.

<!DOCTYPE html> 
<html> 

    <head> 
    <meta http-equiv="refresh" content="1000"> 
    <!-- REFRESH EVERY 2 minutes --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="http://papaparse.com/resources/js/papaparse.js"></script> 
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css"> 
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css"> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script> 
    <style type="text/css"> 


    </style> 
    <title>HTML TABLE FROM .CSV DATA SOURCE</title> 
    </head> 

    <body> 
    <script> 


    //Setting data.csv as data source to be loaded into table id="example" 
     $(function() { 
     Papa.parse("data.csv", { 
      download: true, 
      complete: function(example) { 
      console.log("Remote file parsed!", example.data); 
      $.each(example.data, function(i, el) { 
       var row = $("<tr/>"); 
       row.append($("<td/>").text(i)); 
       $.each(el, function(j, cell) { 
       if (cell !== "") 
        row.append($("<td/>").text(cell)); 
       }); 
       $("#example tbody").append(row); 
      }); 
      } 
     }); 
     }); 

</script> 
<script type='text/javascript'> 
    //Conditionally formating. Where North office are red and South office are green 
    //<![CDATA[ 
    $(window).load(function() { 
    $('#example').dataTable({ 
     "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     switch (aData[0]) { 
      case 'North': 
      $(nRow).css('color', 'red') 
      break; 
      case 'South': 
      $(nRow).css('color', 'green') 
      break; 
     } 
     } 
    }); 
    }); //]]> 

</script> 


<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Extn.</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
    </table> 
    </body> 

</html>

Quelle

2016-09-07 Dabbous

Sie müssen irgendwie Ihre .csv in ein Array von Arrays [[]] (jedes Element darstellt, eine Reihe von Säulen), wie in dem in der tutorial auf der gezeigten Seite gegebenen Beispiel zu transformieren. Der Schlüssel data des Konfigurationsobjekts übergeben Sie an Datatables als den Wert dieser Struktur.

Ein Beispiel zu Brute-Force Umwandlung in diesen fiddle wäre: auf einer Parsing-Bibliothek

var csv="1,2,3\n4,5,6" 

function csvToArray(csv){ 

    return csv.split('\n').map(function(x){ 
     return x.split(','); 
}) 
}; 

console.log(csvToArray(csv));

Für eine korrekte Analyse verlassen.

Quelle

2016-09-10 14:07:03

Wie man Daten von .csv in Datentabelle lädt?

Antwort

Verwandte Themen