我想用DataTables构建一个通用的CSV查看器。
"；通用的"；意味着它应该能够读取从外部获取的任何CSV，并将其表示为Jquery DataTables
我从一个JSON结构(在CSV解析后获得(开始定义这个表：
| 姓名 | |||
|---|---|---|---|
| Stefano | 测试 |
您的列结构不是列的有效DataTables结构。它需要(在您的情况下(定义每列需要使用的title和data选项。
如果您更改JavaScript以构建该结构，则可以成功地使用columns:columes(不需要其他更改(。
您可以重新安排构建columns的逻辑，如下所示：
$.each(data[0], function(k, v) {
columns.push({ title: k, data: k });
});
这构建了以下输出：
[ { title: 'Name', data: 'Name' }, { title: 'Surname', data: 'Surname' }, { title: 'Age', data: 'Age' } ]
演示：
$(function() {
data = [{
"Name": "Stefano",
"Surname": "Rxxxx",
"Age": "45"
},
{
"Name": "Test",
"Surname": "Dummy",
"Age": "50"
}
]
columns = [];
$.each(data[0], function(k, v) {
columns.push({
title: k,
data: k
});
});
$('#example').DataTable({
data: data,
columns: columns
//columns: [ { title: 'Name', data: 'Name' }, { title: 'Surname', data: 'Surname' }, { title: 'Age', data: 'Age' } ]
});
});.display {
margin-top: 20px;
}<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id='example' class='display'></table>
</body>您可以映射第一个对象的键以获得列，也可以映射数据以获得数组数组，这正是DataTables所期望的。
$(function() {
const data = [{
"Name": "Stefano",
"Surname": "Rxxxx",
"Age": "45"
},
{
"Name": "Test",
"Surname": "Dummy",
"Age": "50"
}
];
// get the first object's keys and dump them into an array of objects
const columns = Object.keys(data[0]).map(i => ({title: i}));
// get the values from each data object and add it to a new array of arrays
const formattedData = data.map(i => Object.values(i));
$('#example').DataTable({
data: formattedData,
columns: columns
});
});<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
<table id='example' class='display'></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>