9

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.

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.

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.

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: []
        }
    });
});

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

1 回答 1

6

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

如果您查看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
}

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

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

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

  2. 过滤/查询集中（跨所有页面）有多少条记录

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

dynatable 可以从返回的结果中推断出的唯一事情是上面的 (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'
  }
});
于 2014-01-24T17:26:45.280 回答