无法将 JSON 中的数据加载到数据表中

Question

我正在尝试加载存储在 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 warning: table id=tab - Ajax error. For more information about this error, please see http://datatables.net/tn/7

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

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

无法将 JSON 中的数据加载到数据表中

Can't load data from JSON into Datatable

javascript

jquery

json

datatables-1.10