M 试图从上传的 csv 文件中创建数据表。我面临的唯一问题是定义表列标题。目前我是这样做的,手动定义 header 。
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");
}
提前致谢。
最佳答案
使用 FileReader
而不是 $.get
或类似工具的原因是什么? FileReader
并非所有浏览器都支持,例如 IE9 和 Opera mini。
无论如何 - 因为您读取了一个 CSV 文件,并以准备添加到表中的字符串数组结束,所以不需要在 列
中定义 data
属性>。事实上,使用 $.csv
只需几个非常简单的步骤即可生成显示 CSV 的数据表。以下代码采用任何格式良好的 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();
})
})
关于javascript - 从上传的 csv 数据创建数据表列定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35035288/