我一直试图在Jquery数据表上显示Json响应但没有成功。基本上,一旦服务器返回Json响应,我希望它显示在表上。我检查了Json,似乎有效的Json响应。
JSON响应
[
{
"pk": 7,
"model": "softwareapp.software",
"fields": {
"city": "miami",
"submitted_by": [],
"description": "test",
"title": "test",
"zipcode": "test",
"rating_votes": 0,
"state": "fl",
"address": "test",
"rating_score": 0,
"business_size": [
5
],
"slug": "test",
"developer": "test"
}
},
{
"pk": 8,
"model": "softwareapp.software",
"fields": {
"city": "",
"submitted_by": [],
"description": "",
"title": "test2",
"zipcode": "",
"rating_votes": 0,
"state": "",
"address": "",
"rating_score": 0,
"business_size": [
5
],
"slug": "test2",
"developer": ""
}
},
{
"pk": 10,
"model": "softwareapp.software",
"fields": {
"city": "",
"submitted_by": [],
"description": "",
"title": "test3",
"zipcode": "",
"rating_votes": 0,
"state": "",
"address": "",
"rating_score": 0,
"business_size": [
6
],
"slug": "test3",
"developer": ""
}
}
]
这是Jquery函数。
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script>
$(document).ready(function() {
/*var kaboohAPI = '{% url software-list-ajax %}';*/
jsondata = [];
$('#filterform').on('submit',function(e){
e.preventDefault();
var query = $('#filterform').serialize();
$.ajax({
type:'GET',
url: '{% url software-list-ajax %}',
datatype: 'json',
data: query,
success: function(data){
console.log(data);
$('#example').dataTable({
'aaData': data,
"aaColumns":[
{"mData":"title"},
{"mData":"developer"}
],
});
}/* response processing function ends */
});/* ajax function ends */
});
});
</script>
答案 0 :(得分:5)
数据表函数不读取此JSON。您的JSON应该是一个数组数组或一个对象数组。因此,更好的方法是将数据附加到普通表中,然后初始化数据表,它将正常工作。
请参阅以下资源:
答案 1 :(得分:0)
mavroscy就是我在项目中使用它的方式。
HTML
Date()
JS
<div style="width: 100%;">
<div class="table-responsive">
<table id="exampleMy" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>dob</th>
<th>gender</th>
<th>mobile</th>
<th>email</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<link href="~/Scripts/DataTables/DataTables1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Scripts/DataTables/Responsive-2.2.1/css/responsive.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/DataTables/DataTables1.10.16/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/Responsive-2.2.1/js/dataTables.responsive.min.js"></script>