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

编程问答 2022-10-27

问题描述

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

var data = {
    "data" :  [
        {"name": "Zakaria dd","mail" : "[email protected]","gender" : "Male"},{"name": "Zakaria Nouamane","mail" : "[email protected]",{"name": "Mohmaed Houd","mail" : "[email protected]","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警告：表id = tab-Ajax错误。欲获得更多信息 有关此错误，请参见http://datatables.net/tn/7

我了解到此错误，他们说这与json数据有关。我验证了结构，这很好。调试时，在“网络”选项卡中，我看到304错误。我不知道我在这里想念的是什么，您的帮助将不胜感激。

解决方法

根据数据表示例Javascript sourced data，您不需要ajax。这样您的代码将变为：

var dataSet = {
  "data" :  [
      {"name": "Zakaria dd","mail" : "[email protected]","gender" : "Male"},{"name": "Zakaria Nouamane","mail" : "[email protected]",{"name": "Mohmaed Houd","mail" : "[email protected]","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/[email protected]/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>

datatables-1.10javascriptjqueryjson