无法将数据从 JSON 加载到数据表中答案

【问题标题】：Can't load data from JSON into Datatable无法将数据从 JSON 加载到数据表中
【发布时间】：2020-08-12 14:09:29
【问题描述】：

我正在尝试加载存储在 data.js 文件中的 JSON 数据，如下所示：

var data = {
    "data" :  [
        {"name": "Zakaria dd", "mail" : "zak.m@sige.ma", "gender" : "Male"},
        {"name": "Zakaria Nouamane", "mail" : "zak.n@sige.ma", "gender" : "Male"},
        {"name": "Mohmaed Houd", "mail" : "mohamed.h@sige.ma", "gender" : "Male"}
    ]
}

我在我的 script.js 文件中调用数据变量：

$('#tab').dataTable( {
            "processing": true,
            "ajax": data,
            "columns" : [
                {"data" : "name"},
                {"data" : "mail"},
                {"data" : "gender"}
            ]
          } );

这就是我的 html 代码的结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
    <title>Hello world</title>
</head>
<body>
    <table id="tab" class="table table-striped table-bordered">
      <thead>
            <tr>
                <th>Name</th>
                <th>Mail</th>
                <th>Gender</th>
            </tr>
      </thead>
    </table>  


    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="data.js"></script>
    <script src="script.js"></script>
    

    
</body>
</html>

在导航器中执行时，我收到此警报：

DataTables 警告：table id=tab - Ajax 错误。了解更多信息关于这个错误，请看http://datatables.net/tn/7

我读到了这个错误，他们说它与 json 数据有关。我验证了结构，它很好。当我调试并在网络选项卡中看到 304 错误。我不知道我在这里缺少什么，我们将不胜感激。

【问题讨论】：

标签： javascript jquery json datatables-1.10

【解决方案1】：

根据数据表示例Javascript sourced data，您不需要ajax。所以你的代码变成了：

var dataSet = {
  "data" :  [
      {"name": "Zakaria dd", "mail" : "zak.m@sige.ma", "gender" : "Male"},
      {"name": "Zakaria Nouamane", "mail" : "zak.n@sige.ma", "gender" : "Male"},
      {"name": "Mohmaed Houd", "mail" : "mohamed.h@sige.ma", "gender" : "Male"}
  ]
}
$('#tab').dataTable( {
  "data": dataSet.data,
  "columns" : [
      {"data" : "name"},
      {"data" : "mail"},
      {"data" : "gender"}
  ]
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<table id="tab" class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>Mail</th>
        <th>Gender</th>
    </tr>
    </thead>
</table>

【讨论】：