从上传的csv数据创建dataTable列定义 [英] Create dataTable column definition from uploaded csv data

问题描述

M尝试从上传的csv文件创建datatable。我唯一面临的问题是定义表列标题。目前我已经这样做，手动定义头。

M trying to create datatable out of uploaded csv file. the only problem i'm facing is defining table column header. Currently i have done it like this, defining header manually.

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

}）;

并通过Jquery CSV传递csv数据

and passing csv data through Jquery 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文件本身定义列标题。

this is working fine. I want to define the column header directly from csv file itself.

尝试

 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");
}

提前感谢。

使用 FileReader 而不是 $。get 类似？ 所有浏览器都不支持FileReader ，例如IE9和Opera mini。

Any reason for using FileReader instead of $.get or similar? FileReader is not supported by all browsers, like IE9 and Opera mini.

无论如何 - 因为你读取一个CSV文件，并且结束了准备添加到表中的字符串数组，没有必要定义 列中的数据属性。事实上，它只需要几个非常简单的步骤，使用 $。csv 生成一个显示CSV的dataTable。以下代码采用任何格式良好的CSV并将其发布为dataTable：

Anyway - since you read a CSV file, and end up with arrays of strings ready to be added to the table, there is no need for defining data properties in columns. In fact it only takes a few very simple steps to generate a dataTable showing a CSV using $.csv. The below code takes any well formed CSV and publish it as a dataTable :

$.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();
    })

})

这篇关于从上传的csv数据创建dataTable列定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！