Json to Jquery DataTable

Question

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>

Answer 1

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