从上传的 csv 数据创建数据表列定义
Create dataTable column definition from uploaded csv data
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");
}
提前谢谢。
使用FileReader
而不是$.get
或类似的原因是什么? 并非所有浏览器都支持FileReader
,例如IE9和Opera mini。
无论如何 - 由于您读取了 CSV 文件,并最终准备好将字符串数组添加到表中,因此无需在 columns
中定义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();
})
})
相关文章:
- 自定义筛选器不'我不使用django数据表视图创建的ajax.data.Json
- Spring MVC与Google图表,创建javascript数据表的最佳方式是什么
- 将数据从一个工作表复制到另一个工作表;使用目标工作表中的复制数据创建一个表
- 如何在 C# 中使用多个嵌套 JSON 对象创建数据表
- 未填充使用 jsgrid 创建的表的数据
- 如何将使用 JavaScript 动态创建的表中的数据保存到数据库
- 从动态创建的表单中获取数据
- 在jQuery中创建动态表单数据
- 如何在使用 jQuery 创建表后初始化数据表.js加载函数
- 数据不会出现在使用 AngularJS 创建的表中
- 从上传的 csv 数据创建数据表列定义
- 通过php将创建的行保存在数据表编辑器中
- 为什么创建谷歌图表数据表会误解我的日期
- 在php和jquery中动态创建的表行中选择与加载的数据相对应的选项另一个选择选项
- 将数据从表单接收到已创建的表中
- 使用ajax服务器端数据表动态创建不同的按钮
- 如何验证作为输入字段的动态创建的表行中的数据
- 使用jQuery和Bootstrap创建数据表,而不是使用基本的HTML
- 通过变量中的json数据在js中创建数据表
- 从Javascript源创建数据表