从上载的csv数据创建dataTable列定义

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

提前致谢。

Answer 1

使用FileReader而不是$.get或类似的任何原因？ 所有浏览器都不支持FileReader ，例如IE9和Opera mini。

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

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