Reputation: 4024
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>
Upvotes: 5
Views: 36788
Reputation: 107
mavroscy here is how I have used it in my project.
Html
<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>
JS
<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>
function DataList(ReqID) {
$(document).ready(function () {
getData();
})
var getData() = function () {
$.ajax({
url: '/Controller/Action/',
data: "{ 'prefix': '" + ReqID + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (response) {
BindDataTable(response);
}
})
}
var BindDataTable = function (response) {
$("#exampleMy").DataTable({
"responsive": true,
"aaData": response,
"aoColumns": [
{ "mData": "name" },
{ "mData": "dob" },
{ "mData": "gender" },
{ "mData": "mobile" },
{ "mData": "email" }
]
});
}
Upvotes: 0
Reputation: 20428
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:
Upvotes: 5