如何将JSON结构适配jQuery DataTables以构建通用CSV查看器？

问题根源 #

你遇到的错误来自两个关键问题：

• columns参数格式错误：jQuery DataTables的columns选项需要接收配置对象数组，每个对象必须包含data属性来对应JSON数据中的键名，你直接传入字符串数组，导致DataTables无法正确解析数据结构。
• 表头标签使用不当：表格表头应使用<th>标签而非<td>，这既符合HTML语义规范，也能确保DataTables正确识别表头区域。

修正后的代码 #

JavaScript部分

$(function() {
  const data = [
      {"Name":"Stefano","Surname":"Rxxxx","Age":"45"}, 
      {"Name":"Test","Surname":"Dummy","Age":"50"}
  ];
  const columns = [];
  
  $.each(data[0], function(k, v) {
      // 表头使用<th>标签
      $('#example > thead > tr').append("<th>" + k + "</th>");
      // 构造columns要求的配置对象，指定对应数据键名
      columns.push({ data: k });
  });
  
  $('#example').DataTable({
      data: data,
      columns: columns
  });
});

HTML部分

<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>

<table id='example' class='display'>
<thead><tr></tr></thead>
</table>

额外优化提示 #

• 用const/let声明变量，避免全局变量污染。
• 如果CSV数据可能为空，需添加data.length > 0的判断逻辑，防止data[0]引发报错。

内容的提问来源于stack exchange，提问作者Stefano Radaelli