Question

我正在尝试将以下json数据加载到Datatables中，但我遇到了错误。我的网络浏览器（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>

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

Answer 2

最后我找到了解决方案。当json文件与示例的格式不同时，您就是这样做的。

＆＃34; DATASRC＆＃34; ＆lt; - 遵循您的json格式

{＆＃34;数据＆＃34; ：＆＃34; properties.title＆＃34;}＆lt; - ＆＃34;数据＆＃34;始终＆＃34;数据＆＃39;它是一把固定的钥匙。你不应该改变它＆＃34; dataSrc＆＃34;是。

$(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" }
    ] 
  });

Datatables.net json数据加载

2 个答案: