Django - jQuery 数据表卡在加载中

Posted 2023-05-07

【中文标题】Django - jQuery 数据表卡在加载中

【英文标题】：Django - jQuery datatables stuck on loading

【发布时间】：2014-07-24 04:02:58

【问题描述】：

对不起，我对 Django 很陌生，并试图用一些从服务器返回的数据来加载一个 jQuery 数据表。返回的 json 格式很好。但是，数据未加载到表中，并且我在 firebug 控制台中收到以下错误：

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

此外，我尝试使用sAjaxDataProp 选项来调整aaData 的默认行为，但我不知道应该设置什么。无论如何，下面是所有内容的代码

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" >
    <thead>
    <tr>
        <th>Rfc Number</th>
        <th>RFC title</th>
        <th>RFC Questions</th>
    </tr>
    </thead>
</table>

从url返回的json：

[
    
        "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
        
    
]

如果有人可以提供帮助，我将不胜感激。

【参考方案1】：

库正在寻找来自服务器响应的aaData 属性中的数据。由于服务器正在返回一个对象列表，因此在尝试访问它时会说它是未定义的。

sAjaxDataProp 不能使用空字符串。你可以在这里阅读更多关于你应该从服务器返回的内容：http://legacy.datatables.net/usage/server-side。

将您的 jQuery 部分更改为：

$(document).ready(function () 
    $('#rfctable').dataTable(
        "sAjaxDataProp": 'data',
        "ajax": 'http://127.0.0.1:8000/api/',
        "columns": [
             "fields": "rfc_number",
             "fields": "rfc_title",
             "fields": "rfc_question",
        ]

    );
);

将来自服务器的响应更改为：

"data": [
    
        "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
        
    
]

您还应该在响应中返回 iTotalRecords、iTotalDisplayRecords 和 sEcho。

【讨论】：

这对我有用。我正在使用 laravel。我刚刚添加了data 键。所以，return json_encode(['data' => $users]);