Django jquery 数据表：未捕获的类型错误：无法读取未定义的属性“长度”答案

【问题标题】：Django jquery datatable: Uncaught TypeError: Cannot read property 'length' of undefinedDjango jquery 数据表：未捕获的类型错误：无法读取未定义的属性“长度”
【发布时间】：2015-05-14 12:39:40
【问题描述】：

我正在尝试将数据从 django 1.8.1 中的服务器加载到 jquery 数据表。在该过程结束时，我收到“未捕获的类型错误：无法读取未定义的属性 'length'”javascript 错误。

查看；

datas = Datas.objects.all()
jsonData = serializers.serialize('json', datas)
return HttpResponse(jsonData, content_type='application/json')

在浏览器的“网络”中可以看到返回json数组是这样的；

[{"fields": {"objectname": "O1"}, "model": "my_app.datas", "pk": 1}]

HTML;

<table class="table table-striped table-bordered table-hover" id="id_dataTable" style="cursor: pointer;">
</table>

Js;

  $('#id_dataTable').dataTable({
        "sAjaxSource": '/getData/',
        "aoColumns": [
            {'mData': 'fields.objectname'}
        ],
        "aoColumnDefs": [
            {
                "aTargets": [0],
                "sTitle": "Object",
                "sClass": "align-center"
            }
        ],
        "bProcessing": true,
        "bServerSide": true,
        "bPaginate": false
    });

你能帮忙吗？谢谢

【问题讨论】：

标签： javascript jquery python django

【解决方案1】：

检查 jQuery DataTables 的文档： https://www.datatables.net/examples/ajax/objects.html

您需要提供以下格式的数据：

[
    {
    "name":    "Tiger Nixon",
    "position":   "System Architect",
    "salary":    "$3,120",
    "start_date": "2011/04/25",
    "office":    "Edinburgh",
    "extn":    "5421"
    },
    {...}
]

您可以遍历视图中的数据来构建对象，将它们附加到数组中，然后通过 JsonResponse 发送响应：

from django.http import JsonResponse

datas = Datas.objects.all()
arr = []
for data in datas:
    arr.append({
        'key1': data.key1,
        'key1': data.key1,
    })
return JsonResponse(arr, safe=True)

【讨论】：

首先非常感谢您的回答。这真的很有帮助。我改变了一些部分。如果它是通过 JsonResponse 完成的，JsonResponse 需要一个字典，我还为这个响应安排了 javascript。
JsonResponse 也可以是 Python/Django 中的列表。在 JavaScript 中会变成一个数组。

【解决方案2】：

查看；

datas= Datas.objects.all()
            dataArray = []
            for store in datas:
                dataArray.append({
                    'objectname':data.objectname
                })

return JsonResponse({'data':dataArray}, safe=True)

Js;

$('#id_dataTable').dataTable({
            "sAjaxSource": '/getData/',
            "aoColumns": [
                {'mData': 'objectname'}
            ],
            "aoColumnDefs": [
                {
                    "aTargets": [0],
                    "sTitle": "Object",
                    "sClass": "align-center"
                }
            ],
            "bProcessing": true,
            "sAjaxDataProp": "data",
            "bServerSide": true,
            "bPaginate": false
        });

这是一个答案..

【讨论】：