填充表與JSON數據，基於解析的CSV文件在Jquery，JS

我已經嘗試了整天動態填充表。該應用程序的目的是使用Papaparse（很好的CSV到JSON框架）加載CSV文件並將其解析爲JSON，然後使用DynaTable.js使用此JSON數據填充表格。我可能會盲目使用自己的代碼，我將不勝感激有關如何執行此操作的一些輸入。 :)填充表與JSON數據，基於解析的CSV文件在Jquery，JS

這是我的代碼到目前爲止（不要介意雜亂無章，我將在主要功能到位後清理它）。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>CSV Parser</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, maximum-scale=1.0"> 
     <meta name="theme-color" content="#ffffff"> 

     <link rel="stylesheet" href="styles/bootstrap.min.css"> 
     <link rel="stylesheet" href="styles/filedrop.css"> 

     <script src="scripts/jquery-2.1.4.min.js"></script> 
     <script src="scripts/bootstrap.min.js"></script> 
     <script src="scripts/papaparse.min.js"></script> 
     <script src="scripts/jquery.dynatable.js"></script> 
     <script> 
      var data; 

      function handleFileSelect(evt) { 
       var file = evt.target.files[0]; 

       Papa.parse(file, { 
        header: true, 
        dynamicTyping: true, 
        complete: function (results) { 
         data = results; 
         localStorage.setItem('dataStuff', JSON.stringify(data)); 
        } 
       }); 
      } 

      $(document).ready(function() { 
       $("#csv-file").change(handleFileSelect); 
      }); 
     </script> 
    </head> 
    <body> 
     <main> 
      <header> 
       <div class="jumbotron"> 
        <div class="container"> 
         <p>CSV Parser</p> 
        </div> 
       </div> 
      </header> 
      <h1>Load CSV-file</h1> 
      <input type="file" id="csv-file" name="files" /> 

      <table id="my-table"> 
       <thead> 
        <tr> 
         <th>Phone Number</th> 
         <th>Email Address</th> 
         <th>Binding End Date</th> 
         <th>Terminal Vendor</th> 
         <th>Terminal Billeba</th> 
        </tr> 
       </thead> 
       <tbody> 
       </tbody> 
      </table> 

      <script> 
       $.getJSON('dataStuff', function (response) { 
        $('#my-table').dynatable({ 
         dataset: { 
          records: response 
         }, 
        }); 
       }); 
      </script> 
     </main> 
    </body> 
    <footer> 
    </footer> 
</html>

來源

2015-10-20 Gaute

從外表看，我會說你的$ .getJSON是在加載頁面時執行的，而不是在選擇和解析實際文件時執行的。 – Danmoreng

是的，我認爲你應該綁定你的$ .getJSON來完成handleFileSelect的回調。 –

也這麼想，但Dynatable.js必須在

-tag後面調用，對吧？這可能是一個愚蠢的問題，但是如何在運行handleFileSelect函數後將數據推送到表中？你有一個例子嗎？ @JuusoPalander – Gaute

回答

您是否嘗試過將數據放置人口代碼的complete回調Papa.parse？像這樣：

Papa.parse(file, { 
    header: true, 
    dynamicTyping: true, 
    complete: function (results) { 
     data = results; 
     localStorage.setItem('dataStuff', JSON.stringify(data)); 

     $('#my-table').dynatable({ 
      dataset: { 
       records: results 
      } 
     }); 
    } 
});

來源

2015-11-03 02:10:25 dunli

填充表與JSON數據，基於解析的CSV文件在Jquery，JS

回答

相關問題