javascript - 数据未填充到带有数组对象的数据表中，出现黑屏

Question

数据未填充到带有数组对象的数据表中，从而出现空白屏幕。尝试使用以下代码，请提出任何问题

$('#example3').DataTable( {
        data:storedJsonData,
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "position" },
            { "data": "salary" },
            { "data": "start_date" },
            { "data": "office" },
            { "data": "extn" }
        ]
    } );

Fiddle

Answer 1

未填充数据，因为列标题区分大小写且必须等于给定数据。
我修复了您的数据和列标题。现在它可以工作并在 DataTable 上显示您的数据。

var storedJsonData = [{
    "id": "1",
    "name": "abc",
    "position": "Accountant",
    "office": "Tokyo",
    "Age": "63",
    "start_date": "2011/07/25",
    "salary": "$170,750",
    "extn": "2"
  },
  {
    "id": "2",
    "name": "def",
    "position": "Accountant",
    "office": "Tokyo",
    "Age": "63",
    "start_date": "2011/07/25",
    "salary": "$170,750",
    "extn": "2"
  }
];

$('#example3').DataTable({
  data: storedJsonData,
  "columns": [{
      "data": "id"
    },
    {
      "data": "name"
    },
    {
      "data": "position"
    },
    {
      "data": "salary"
    },
    {
      "data": "start_date"
    },
    {
      "data": "office"
    },
    {
      "data": "extn"
    }
  ]
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example3" class="display" style="width:100%">

</table>