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

Question

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

javascriptjqueryjquery-pluginsdatatables

5

当我进一步检查调试时，我发现它确实传递了json数据，下面是调试的屏幕截图。 enter image description here

演示PLNKR

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

- Nick Kahn

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Nikola Loncar

版本DataTables 1.10.4：行号3019 - Nick Kahn

你在示例中使用的是1.9.4版本，但该函数并没有定义。 :) - Nikola Loncar

抱歉，我在创建 Plkr 上的演示时忘记指向正确的内容了。让我来修正一下，但是我在本地机器上使用的是 1.10.4 版本。 - Nick Kahn

3个回答

0

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

- user2185592

0

在我的情况下，我所需要做的就是设置"columns"参数，就像@Nikola Loncar的回答中所示，并且定义一个键来接收ajax返回的数据：将所有结果数组放在"data"键内。例如：{"data": [...]}。

- Doglas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikola Loncar · Accepted Answer

您正在混合使用旧版的datatables API和新版本的datatables。请使用新的API：

由于JSON数据源的跨域策略，我无法使用“Demo PLNKR”示例：

跨域请求被阻止：同源策略不允许读取远程资源 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"},
 ...
]