从上传的 csv 数据创建 dataTable 列定义答案

【问题标题】：Create dataTable column definition from uploaded csv data从上传的 csv 数据创建 dataTable 列定义
【发布时间】：2016-01-27 10:51:55
【问题描述】：

M 试图从上传的 csv 文件中创建数据表。我面临的唯一问题是定义表格列标题。目前我已经这样做了，手动定义标题。

var table = $('#example').DataTable({
    columns: [{
          "title": "Number",
          "data": "Number"
      }, {
          "title": "Category",
          "data": "Category"
      }, {
          "title": "Assignment group",
          "data": "Assignment group"
      }
      ]

});

并通过 Jquery CSV 传递 csv 数据

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

这工作正常。我想直接从 csv 文件本身定义列标题。

试过了

 var f = event.target.files[0];
if (f) {
    var r = new FileReader();
    r.onload = function(e) {
        console.log("on load function");
        var result = $.csv.toArrays(e.target.result); // This will give CSV rows
        var csvHeader = result[0]; // This will give first CSV header
        var option;
        $.each( csvHeader, function( value ){
           console.log(value)
           // Now iterate each value to define Datatable column
           option = // Define column  which will create below column definition 

           /* columns: [{
                         "title": "Number",
                         "data": "Number"
                     }, {
                         "title": "Category",
                         "data": "Category"
                     }, {
                         "title": "Assignment group",
                         "data": "Assignment group"
                     }, {
                          "title": "Short description",
                          "data": "Short description"
                      },
                      {
                          "title": "Description",
                          "data": "Description"
                      }
                     ]*/


        });


        var table = $('#example').DataTable({

          //Define datatable passing column definition as option 
        });



        table.rows.add($.csv.toObjects(e.target.result)).draw();
    }
    r.readAsText(f);
} else {
    alert("Failed to load file");
}

提前致谢。

【问题讨论】：

标签： javascript jquery csv datatables jquery-csv

【解决方案1】：

使用FileReader 代替$.get 或类似的任何理由？ FileReader 并非所有浏览器都支持，例如 IE9 和 Opera mini。

无论如何 - 由于您读取了一个 CSV 文件，并最终得到准备添加到表中的字符串数组，因此无需在 columns 中定义 data 属性。事实上，使用$.csv 生成一个显示 CSV 的 dataTable 只需要几个非常简单的步骤。下面的代码采用 any 格式良好的 CSV 并将其作为数据表发布：

$.get(<CSV FILE>, function(csv) {
    var data = $.csv.toArrays(csv),
        columns = [];

    //create the columns object
    data[0].forEach(function(col) {
        columns.push({ title: col });
    })

    //remove the CSV header row for convenience 
    data.splice(0,1);

    //create the dataTable
    var table = $('#example').DataTable({
        columns: columns
    })

    //insert rows
    data.forEach(function(row) {
        table.row.add(row).draw();
    })

})

【讨论】：