Datatables.net json 数据加载答案

【问题标题】：Datatables.net json data loadDatatables.net json 数据加载
【发布时间】：2018-04-22 15:15:25
【问题描述】：

我正在尝试将以下 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>

【问题讨论】：

标签： javascript jquery json datatables

【解决方案1】：

您指定的 columns 数组错误。

columns 数组是您在表格中按列指定多个选项的位置。没有可用的features 选项；大概这就是为什么你没有看到一张桌子。可用值为here。

现在，您应该可以简单地这样做了：

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

就像在this example（您可能曾经开始使用它）中一样，完全删除您的columns 定义。您已经使用 HTML 指定了列。如果您需要与示例不同的选项，则需要学习正确使用columns。

有关这方面的更多信息，请参阅this post。

【讨论】：

谢谢，虽然不完全正确，但帮助我得到了提示

【解决方案2】：

终于找到了解决办法。当 json 文件的格式与示例不同时，您就是这样做的。

"dataSrc"

{ "data" : "properties.title"}

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

【讨论】：

"JSON 文件的格式与示例不同。"一定是个秘密。至少，你没有在你的问题中提到这一点。 :) 无论如何，我很高兴我的回答给了您一个提示，并感谢您发布您的解决方案。是的，如果您要查找的数据嵌套在“功能”节点中，则必须像在此处所做的那样指定“dataSrc”。