javascript - Datatables.net json数据加载

标签 javascript jquery json datatables

我正在尝试将以下 json 数据加载到数据表中,但遇到错误。我的网络浏览器(chrome)成功下载了数据,但它并不代表数据。该表仅显示列名,但不显示任何内容。有人可以帮帮我吗?

{
  "type": "FeatureCollection",
  "features": [
{
  "type": "Feature",
  "properties": {
    "Feature_ID": "4",
    "Clean_Feature_Name": "Abalos Colles",
    "Feature_Type": "Collis, colles",
    "Feature_Type_Code": "CO",
    "title": "['Arecibo radar imagery of Mars: II. Chryse-Xanthe, polar caps, and other regions']",
    "author": "['Harmon, John K.', 'Nolan, Michael C.']",
    "year": 2017,
    "bibcode": "2017Icar..281..162H",
    "pub": "Icarus"
  }
 }
]
}

下面是我的 JavaScript 代码。

$(document).ready(function() {
 $('#example').DataTable( {
  "ajax" : {
    "url" : "http://212.201.46.76/data_final/sample_paper.json",
  },
  "columns" : [
    { "features" : "properties.Feature_Id" },
    { "features" : "properties.Clean_Feature_Name" },
    { "features" : "properties.Feature_Type" },
    { "features" : "properties.Feature_Type_Code" },
    { "features" : "properties.title" },
    { "features" : "properties.author" },
    { "features" : "properties.year" },
    { "features" : "properties.bibcode" },
    { "features" : "properties.pub" },
  ]
  } );
 } );

我的 HTML 代码

    <body>
  <button id="reload">Reload</button>
    <div class="container">
        <table id="example" class="display" width="100%">
            <thead>
                <tr>
        <th>Feature_ID</th>
        <th>Clean_Feature_Name</th>
        <th>Feature_Type</th>
        <th>Feature_Type_Code</th>
        <th>Bibcode</th>
        <th>Title</th>
        <th>Author</th>
        <th>Year</th>
        <th>Pub</th>                    
              </tr>
            </thead>

            <tfoot>
                <tr>
        <th>Feature_ID</th>
        <th>Clean_Feature_Name</th>
        <th>Feature_Type</th>
        <th>Feature_Type_Code</th>
        <th>Bibcode</th>
        <th>Title</th>
        <th>Author</th>
        <th>Year</th>
        <th>Pub</th>                    
                </tr>
            </tfoot>
        </table>
    </div>
</body>

最佳答案

您指定的数组错误。

columns 数组是您在表中按列指定多个选项的位置。没有可用的features选项;想必这就是您看不到 table 的原因。可用值为 here .

现在,您应该能够简单地执行以下操作:

$(document).ready(function() {
  $('#example').DataTable( {
    "ajax" : {
      "url" : "http://212.201.46.76/data_final/sample_paper.json",
    }
  });
});

this example 所示(您可能曾经使用过),完全删除您的 columns 定义。您已使用 HTML 指定了列。如果您需要与示例不同的选项,则需要学习正确使用

有关这方面的更多信息,请参阅 this post .

关于javascript - Datatables.net json数据加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49967493/

相关文章:

javascript - NODE.JS 访问 EJS 模板中的函数

javascript - 如何删除仅包含特定类名且不包含字符串内部内容的 html 标签(span)换行?

javascript - DIV不隐藏时如何切换图像

javascript - 在 Jquery 中读取 JSON 结果的值

javascript - 我可以在 angularjs 的 $scope 函数中编写这个函数吗

javascript - 在javascript中删除字符串内的元素从特定字符到另一个字符?

javascript - Mopub 移动网络/javascript 实现调整文本大小/覆盖 CSS

javascript - 用户输入创建 D3 饼图

java - 意外的输入结束 : expected close marker for Object (start marker at [Source: {; line: 1, 列 : 1]) at [Source: {; line: 1, 列:3]

javascript - 无法使用 json 填充选择列表