从Dynatable加载远程JSON [英] Load remote JSON from Dynatable

问题描述

更新： 为了避免问题完全归结为相同的原始政策，我尝试在本地提供服务，所有资产都来自 http：// localhost：4000 使用服务。它没有解决问题。所以编辑小提琴可能不起作用，因为相同的原始政策，但你可以在那里看到代码。

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:4000 using 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.

我'我试图使用 Dynatable 加载外部JSON，跳过read / normalize步骤（从现有表生成JSON）。这应该得到支持，但它对我不起作用。

I'm trying to use Dynatable to 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.

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

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.

这是我的JavaScript：

Here's my 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，以及包含本地表数据的脚本：

...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:

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

推荐答案

遥控器不工作的原因是因为通过AJAX获取数据，响应JSON必须包含一些元数据以及实际记录。

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示例，您可以单击查看AJAX数据以查看格式如下：

If you look at the AJAX example in the dynatable docs, you can click "View AJAX Data" to see what the format looks like:

{
  "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
}

你可以看到实际的资源ults数组嵌套在响应JSON中的records下，它还返回集合中总数的记录数，以及当前集合中的记录数。

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.

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

The reason this meta-data is needed by dynatable is in order to do the pagination and the record-count text at 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:

1. 集合中的总记录数量<。

1. how many total records are in the set vs.

过滤/查询集合中的记录数量（跨所有页面）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).

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

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结果将位于服务器返回的JSON的根目录：

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:

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

这篇关于从Dynatable加载远程JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！