从Dynatable加载远程JSON

Question

更新： 为避免问题完全归因于同一原产地政策的可能性，我尝试在本地提供服务，因为所有资产都来自html" target="_blank">http://localhost:4000使用
Serve
。它没有解决问题。因此，由于相同的原始策略，可能无法编辑小提琴，但是您可以在此处看到代码。

我正在尝试使用Dynatable加载外部JSON，跳过读取/标准化步骤（该步骤从现有表生成JSON）。应该支持它，但是它对我不起作用。

这是我对JSFiddle的尝试。从小提琴中可以看出，从文档中加载JSON（对我来说似乎并不是很有用），可以正常工作。但是从URL提取它根本不起作用。

这是我的JavaScript：

// getting JSON from the document works, but of what use is that?
$(document).ready( function() {
    $('#local').dynatable({
        dataset: {
            records: JSON.parse($('#music').text())
        }
    });        
    // getting JSON from a remote source fails:
    $('#remote').dynatable({
        dataset: {
            ajax: true,
            ajaxOnLoad: true,
            ajaxUrl: '//www.dynatable.com/dynatable-ajax.json',
            records: []
        }
    });
});

…，它引用两个表，一个表的ID为“ local”，另一个表的ID为“ remote”，以及一个包含本地表数据的脚本：

<h3>Remote JSON: Failing</h3>
<table class="table table-striped" id="remote">
  <thead>
    <th>Some Attribute</th>
    <th>Some Other Attribute</th>
  </thead>
  <tbody>
  </tbody>
</table>
<hr>
<h3>Local JSON: Succeeding</h3>
<table class="table table-striped" id="local">
  <thead>
    <th style="color: black;">Band</th>
    <th>Album</th>
  </thead>
  <tbody>
  </tbody>
</table>
<script id="music">
[
    {
        "band": "The Police",
        "album": "Ghost In The Machine"
    },{
        "band": "Supertramp",
        "album": "Breakfast In America"
    },{
        "band": "Peter Tosh",
        "album": "Mama Africa"
    },{
        "band": "The Police",
        "album": "Regatta d'Blanc"
    },{
        "band": "The Police",
        "album": "Zenyatta Mondatta"
    },{
        "band": "Supertramp",
        "album": "Crime of the Century"
    },{
        "band": "Talking Heads",
        "album": "Remain in Light"
    },{
        "band": "Talking Heads",
        "album": "Speaking in Tongues"
    }
]
</script>

Answer 1

远程服务器无法正常工作的原因是，当通过AJAX获取数据时，响应JSON必须包含一些元数据以及实际记录。

如果您查看可动态化文档中的AJAX示例，则可以单击“查看AJAX数据”以查看格式：

{
  "records": [
    {
      "someAttribute": "I am record one",
      "someOtherAttribute": "Fetched by AJAX"
    },
    {
      "someAttribute": "I am record two",
      "someOtherAttribute": "Cuz it's awesome"
    },
    {
      "someAttribute": "I am record three",
      "someOtherAttribute": "Yup, still AJAX"
    }
  ],
  "queryRecordCount": 3,
  "totalRecordCount": 3
}

您可以看到实际结果数组嵌套"records"在响应JSON中，并且它还返回集合中总共有多少条记录以及当前集合中有多少条记录。

动态数据需要此元数据的原因是为了在表底部进行分页和记录计数文本。由于您的服务器正在执行实际的查询，排序和分页（例如，通过数据库查询或其他服务器端处理），因此可动态化只能看到最终结果。因此，可动态化永远不会知道：

1. 集合中有多少总记录与

2. 筛选/查询集中有多少条记录（跨所有页面）与

3. 筛选/查询的分页集中有多少条记录（在当前页面上）。

从返回的结果中可以得出的唯一可推论结果是从上面的（3），即当前页面上已过滤/查询的集中有多少条记录。因此，它需要从服务器返回的JSON来告诉它（1），即totalRecordCount和；（2），即queryRecordCount。

当然，如果您不希望所有这些，可以关闭分页和记录计数文本，并告诉dynatable结果将位于服务器返回的JSON的根目录：

$('#remote').dynatable({
  features: {
    paginate: false,
    recordCount: false
  },
  dataset: {
    ajax: true,
    ajaxOnLoad: true,
    ajaxUrl: '//www.dynatable.com/dynatable-ajax.json',
    records: []
  },
  params: {
    records: '_root'
  }
});