I have been trying to display Json response on Jquery datatable with no success. Basically once server returns the Json response i want it to be displayed on the table.I got the Json checked and it seems to valid Json response.
JSON Response
[
{
"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": ""
}
}
]
Here is the Jquery function.
<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>
This JSON is not read by the datatable function. Your JSON should be an array of arrays or an array of objects. So a better way is to append the data in a normal table then initialize datatable and it will work fine.
Refer to these resources:
DataTables AJAX source example
DataTables AJAX source example - array of objects as a data source
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With