数组转换为JSON后如何将数据加载到DataTables表格中

问题根因 #

你遇到的问题核心是数据结构不符合DataTables的要求，同时做了多余的类型转换操作：

• 你调用$.csv.toArrays得到的data1本身就是标准二维数组，不需要通过Object.assign({}, data1)转成普通对象再做序列化/反序列化，这段操作直接把数组结构改成了键为数字的对象，和你可正常运行的测试数据结构完全不匹配
• 你测试正常的testdata是数组中存储对象的结构，而你转换得到的stringToJsonObject是外层为普通对象、内部嵌套数组的结构，自然无法被DataTables识别

修正方案 #

方案1：直接使用二维数组（最简单，无需转换） #

DataTables本身支持二维数组作为数据源，直接修改表格初始化的列配置即可，不需要做任何JSON转换操作：

// 读取CSV代码保持不变
$.ajax({ 
  url: "Users.csv",  
  async: false, 
  success: function (csvd) { 
    data1 = $.csv.toArrays(csvd); 
  },
  dataType: "text"
});

// 直接用csv输出的二维数组初始化表格
$(document).ready(function () { 
  var table = $('#example').DataTable({ 
    "data": data1, 
    select:"single",
    "columns": [ 
      { 
        "className": 'details-control', 
        "orderable": false, 
        "data": null, 
        "defaultContent": '',
        "render": function () { 
          return '<i class="fa fa-plus-square" aria-hidden="true"></i>'; 
        },  
        width:"15px" 
      },
      // 列配置用数字下标，不要加引号
      { "data": 0 },
      { "data": 1 },
      { "data": 2 },
      { "data": 3 },
      { "data": 4 }
    ], 
    "order": [[1, 'asc']] 
  });
});

方案2：转换为和测试数据一致的对象数组 #

如果你需要保持原来的字符串键列配置，可以先把二维数组转成对象数组：

// 读取CSV后做格式转换
var formattedData = data1.map(row => ({
  "0": row[0],
  "1": row[1],
  "2": row[2],
  "3": row[3],
  "4": row[4],
  "5": row[5]
}))

// 初始化表格时用转换后的数据
$(document).ready(function () { 
  var table = $('#example').DataTable({ 
    "data": formattedData, 
    select:"single",
    "columns": [ 
      { 
        "className": 'details-control', 
        "orderable": false, 
        "data": null, 
        "defaultContent": '',
        "render": function () { 
          return '<i class="fa fa-plus-square" aria-hidden="true"></i>'; 
        },  
        width:"15px" 
      },
      { "data": "0" },
      { "data": "1" },
      { "data": "2" },
      { "data": "3" },
      { "data": "4" }
    ], 
    "order": [[1, 'asc']] 
  });
});

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