javascript 从 Dynatable 加载远程 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21297192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load remote JSON from Dynatable
提问by iconoclast
Update:to avoid the possibility that the problem comes solely down to the same origin policy, I've tried serving this locally where all assets are coming from http://localhost:4000using Serve. It didn't solve the problem. So editing the fiddle might not work because of the same origin policy, but you can see the code there.
更新：为了避免问题完全归结为同源策略的可能性，我尝试在所有资产都来自http://localhost:4000使用Serve 的本地提供服务。它没有解决问题。因此，由于同源策略，编辑小提琴可能不起作用，但您可以在那里看到代码。
I'm trying to use Dynatableto load external JSON, skipping the read/normalize step (which generates the JSON from an existing table). This is supposed to be supported, but it's not working for me.
我正在尝试使用Dynatable加载外部 JSON，跳过读取/规范化步骤（从现有表生成 JSON）。这应该是支持的，但它对我不起作用。
Here's my attempt on JSFiddle. Loading JSON from within the document (which doesn't seem terribly useful to me) is working perfectly, as seen in the fiddle. But pulling it in from a URL is not working at all.
这是我对 JSFiddle 的尝试。从文档中加载 JSON（对我来说似乎不是很有用）工作完美，如小提琴所示。但是从 URL 中提取它根本不起作用。
Here's my JavaScript:
这是我的 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: []
}
});
});
...which refers to two tables, one with an id of "local" and another with an id of "remote", and to a script containing data for the local table:
...它指的是两个表，一个 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>
采纳答案by jangosteve
The reason the remote isn't working is because when fetching data via AJAX, the response JSON must have some meta-data included with it along with the actual records.
远程不工作的原因是因为当通过 AJAX 获取数据时，响应 JSON 必须包含一些元数据以及实际记录。
If you look at the AJAX example in the dynatable docs, you can click "View AJAX Data" to see what the format looks like:
如果您查看dynatable docs中的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
}
You can see the actual results array is nested under "records"in the response JSON, and it also returns how many records are total in the set, as well as how many are in the current set.
您可以看到实际结果数组嵌套"records"在响应 JSON 下，它还返回集合中总共有多少条记录，以及当前集合中有多少条记录。
The reason this meta-data is needed by dynatable is in order to do the pagination and the record-count textat the bottom of the table. Since your server is doing the actual querying, sorting, and paginating (e.g. via a database query or other server-side processing), dynatable only sees the final result. Therefore, dynatable wouldn't ever know:
dynatable 需要此元数据的原因是为了在表格底部进行分页和记录计数文本。由于您的服务器正在执行实际的查询、排序和分页（例如，通过数据库查询或其他服务器端处理），因此 dynatable 只能看到最终结果。因此， dynatable 永远不会知道：
how many total records are in the set vs.
how many records are in the filtered/queried set (across all pages) vs.
how many records are in the filtered/queried paginated set (on the current page).
集合中的总记录数 vs 总记录数
过滤/查询集中有多少记录（跨所有页面）与
过滤/查询的分页集中有多少记录（在当前页面上）。
The only thing dynatable could infer from the returned results is (3) from above, i.e. how many records are in the filtered/queried set on the current page. So, it needs the returned JSON from the server to tell it (1), which is the totalRecordCount, and (2), which is the queryRecordCount.
dynatable 可以从返回的结果中推断出的唯一一件事是上面的 (3)，即当前页面上过滤/查询集中有多少记录。因此，它需要从服务器返回的 JSON 来告诉它 (1)，哪个是totalRecordCount，以及 (2)，哪个是queryRecordCount.
Of course, if you don't want all of that, you can just turn off pagination and the record-count text, and tell dynatable that the results will be located at the root of the JSON returned by the server:
当然，如果您不想要所有这些，您可以关闭分页和记录计数文本，并告诉 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'
}
});
