从上传的 CSV 文件创建 DataTable答案

【问题标题】：Create DataTable from an uploaded CSV file从上传的 CSV 文件创建 DataTable
【发布时间】：2016-01-12 10:32:36
【问题描述】：

我是一名初级程序员。

我正在使用jQuery Data Table with Bootstrap 创建表。

我需要从上传的 CSV 文件创建表格。

有什么方法可以将 csv 数据创建为 json 吗？

'submit form': function (event){
     console.log("Submitting form");
     event.preventDefault();
     var frm = document.getElementById('frm');
     var csvdata = new FormData(event.target);
     console.log("data:: " + csvdata);

     // Code to create dataTable out of csv
     // $('#mytable').DataTable();
}

我该怎么做？

【问题讨论】：

如果您正在上传文件并存储在服务器上，那么您可以在那里转换 CSV 并返回 JSON。如果您想在客户端上完成所有操作，则可以使用FileReader class。
感谢您提供一些代码 sn-p @RoryMcCrossan
你知道，这是一个可爱的问题，所以我会玩并回复你 - 但与此同时，如果没有一些服务器端代码，你将无法做到这一点。 . 除非您在页面本身上执行此操作，这意味着不上传 csv，但可能会将 csv 文件粘贴到 textarea 中。这会有帮助吗？

标签： javascript jquery twitter-bootstrap csv datatables

【解决方案1】：

正如 Rory McCrossan 指出的那样，FileReader 方法也确实有效well：

$("#fileinput").on("change", function(evt) {
    var f = evt.target.files[0];
    if (f) {
        var r = new FileReader();
        r.onload = function(e) {
            table.rows.add($.csv.toObjects(e.target.result)).draw();
        }
        r.readAsText(f);
    } else {
        alert("Failed to load file");
    }
});

【讨论】：

太棒了！谢谢@annoyinmouse

【解决方案2】：

与其将csv 上传到服务器并在那里处理然后在DataTable 中显示它，如果您可以访问原始数据数据并且您知道它的结构，那么您可以在不接触服务器的情况下渲染cvs .

这个example 使用jquery-csv 来解析文本区域的内容并填充表格。相关函数是这样的：

$("#populateTable").click(function(){
    table.rows.add($.csv.toObjects($("#csvImport").val())).draw();
});

希望对您有所帮助。

【讨论】：