Django - jQuery datatables stuck on loading

arashaga

Sorry I am pretty new to Django and trying to laod a jQuery datatables with some data coming back from the server. the json coming back is in a good format. However, the data is not loading in the table and I get the following error in the firebug console:

TypeError: aData is undefined
for ( i=0 ; i<aData.length ; i++ ) {

Additionally, I tried to play around with the sAjaxDataProp option to adjust the default behavior of aaData but I couldn't figure what it should be set to. Anyways below is the code for everything

jquery:

$(document).ready(function () {
    $('#rfctable').dataTable({
        "sAjaxDataProp": '', // I don't know if I need this or how to deal with it
        "ajax": 'http://127.0.0.1:8000/api/',
        "columns": [
            { "fields": "rfc_number"},
            { "fields": "rfc_title"},
            { "fields": "rfc_question"},
        ]

    });
});

html:

<table id="rfctable" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Rfc Number</th>
        <th>RFC title</th>
        <th>RFC Questions</th>
    </tr>
    </thead>
</table>

json coming back from the url:

[
    {
        "pk": 1,
        "model": "rfc.rfcdocument",
        "fields": {
            "rfc_title": "123123123123",
            "rfc_answer_reviewed_by": 1,
            "rfc_required_fcd": true,
            "rfc_drawing_detail_number": "123",
            "rfc_required_sketch": true,
            "rfc_answer_authorized_by": 1,
            "rfc_issued_by": 1,
            "rfc_answer_issued_date": null,
            "rfc_specification_section": "34-5",
            "rfc_answered_date_architect": null,
            "rfc_question": "Salam baba?",
            "rfc_issued_date": null,
            "rfc_answer": "salama back!",
            "rfc_project": 1,
            "rfc_required_fls_review": true,
            "rfc_drawing_page_number": "54",
            "rfc_issued_to": 1
        }
    }
]

I would appreciate it if someone could help.

Rpiechura

The sAjaxDataProp is used to tell the table how to read yor Json IE if you had multiple objects named foo, bar, and foobar and you only wanted the table to look at foo, because the other two are meant for something else than you'd point it to foo and it'd ignore the rest. In your case it doesn't appear that you want that, so I'd take that out.

Another issue I'm seeing is that you're mixing old syntax (sAjaxDataProp) with new syntax (columns / ajax). The correct usage would be to change sAjaxDataProp (assuming you still wanted to use it) to be "ajax": { "dataSrc": //Whatever you want it to point at } as can be seen here http://datatables.net/reference/option/ajax.dataSrc. Basically if you see a letter or two before words, it's almost always old syntax and you want to use the new stuff since they don't play well together. For more information on how to translate the two, look here http://www.datatables.net/upgrade/1.10-convert