Geek Answers Handbook

Json for jQuery DataTable

I am trying to show Json's answer on a jQuery datatable without success. Basically, as soon as the server returns a Json response, I want it to appear in the table. I got Json and it seems to be a valid Json answer.

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>
+4
source share
1 answer

This JSON is not read by the datatable function. Your JSON should be an array of arrays or an array of objects. Thus, the best way is to add data to a regular table, then initialize the datatable, and it will work fine.

Refer to these resources:

+4

More articles:


All Articles