Question

当我进一步检查调试时，我发现它确实传递了json数据，这里是调试的屏幕截图。

<html>
<head>
  <link 
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.js" data-semver="1.9.4" data-require="datatables@*"></script>
  <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body>
  <table id="myDataTable" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>primaryGenreName</th>
        <th>country</th>    
      </tr>
    </thead>
    <tbody>
    </tbody>
</body>
</html>

Answer 1

您正在将旧版datatables api与新版本的数据表混合使用。

使用新API：

我没有设法使用＆＃34; Demo PLNKR＆＃34;示例是由于该JSON数据源的跨域策略：

阻止跨源请求：同源策略禁止读取远程资源在 https://itunes.apple.com/search?term=apple&_=1421706895095。这个可以通过将资源移动到同一域或启用CORS来修复。

最后我的建议是：

将sAjaxSource更改为ajax，将aoColumns更改为columns，将mData更改为data ...

处理您获得的JSON格式的Ajax响应，使用数据列字段example正确映射。如果你使用itunes结果，它将是这样的：

"ajax": {
    "url" : "https://itunes.apple.com/search?term=apple",
    "dataSrc" : "results"
},
"columns": [
 {"data": "artistName"},
 {"data": "collectionName"},
 {"data": "trackName"},
 {"data": "collectionCensoredName"},
 {"data": "trackCensoredName"},
 {"data": "artistViewUrl"},
 ...
]

Answer 2

我遇到了完全相同的问题。如果您想直接将数组绑定到数据表，则修复此问题是将 'sAjaxDataProp' 设置为 ""（即空）。这类似于在ajax调用中设置datasrc = ""。

Answer 3

在我的例子中，我需要做的就是设置“columns”参数，如@Nikola Loncar 的回答，并定义一个 ajax 返回的键：将所有结果数组放在“data”键中。示例：{"data": [...]}。

DataTables - _fnAjaxDataSrc - 无法读取未定义的属性“length”

3 个答案: