DataTables - _fnAjaxDataSrc - 无法读取未定义的 属性 'length'
DataTables - _fnAjaxDataSrc - Cannot read property 'length' of undefined
我进一步查看调试,发现确实传递了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>
您将旧版 datatables
api 与新版数据表混合在一起。
使用新的API:
由于 JSON 数据源的跨域策略,我无法使用 "Demo PLNKR" 示例:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at
https://itunes.apple.com/search?term=apple&_=1421706895095. This can
be fixed by moving the resource to the same domain or enabling 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"},
...
]
我遇到了完全相同的问题。如果您直接想将数组绑定到数据表,则解决此问题的方法是将 'sAjaxDataProp' 设置为“”(即为空)。这类似于在 ajax 调用中设置 datasrc = ""。
在我的例子中,我需要做的就是设置“列”参数,如@Nikola Loncar 的回答,并为 ajax return 定义一个键:把所有“数据”键内的结果数组。示例:{“数据”:[...]}。
我进一步查看调试,发现确实传递了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>
您将旧版 datatables
api 与新版数据表混合在一起。
使用新的API:
由于 JSON 数据源的跨域策略,我无法使用 "Demo PLNKR" 示例:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://itunes.apple.com/search?term=apple&_=1421706895095. This can be fixed by moving the resource to the same domain or enabling 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"},
...
]
我遇到了完全相同的问题。如果您直接想将数组绑定到数据表,则解决此问题的方法是将 'sAjaxDataProp' 设置为“”(即为空)。这类似于在 ajax 调用中设置 datasrc = ""。
在我的例子中,我需要做的就是设置“列”参数,如@Nikola Loncar 的回答,并为 ajax return 定义一个键:把所有“数据”键内的结果数组。示例:{“数据”:[...]}。