Question

我已经被困这个问题了几天了。我试图将JSON数据提供给DataTables，但只有在我使用静态文件作为源时才会起作用（参见下面的index.html）。

的index.html

$(document).ready(function() {
    $('#mydata').DataTable( {

          "ajax": {
            "url": '{% static "myapp/supplier.json" %}',  //<= works
{#                    "url": '{{ suppliers_all }}',#}     //<=does not work
            "dataSrc": ""
          },
            "columns": [
                { "data": "name" },
                { "data": "classification" },
            ]
    } );
} );

views.py

def index(request):
    suppliers_all = Supplier.objects.all().values('name', 'classification')
    suppliers_all = json.dumps(list(suppliers_all))
    context = {'suppliers_all': suppliers_all,
               }
    return render(request, 'myapp/index.html', context)

JSON输出：

[{"classification": "Base Supplier", "name": "Supplier Name1"}, {"classification": "Strategic Supplier", "name": "Supplier Name2"}]

当我使用django传递变量{{ suppliers_all }}时，浏览器调试返回a 404 not found error。我尝试根据网站示例硬编码JSON输出，尝试了许多不同的方法，但如果它不是直接从文件中提取的话，它将无法工作。

更新通过使用JSON Httpresponse和url

创建新视图解决了问题

def supjson(request):
    suppliers_all = Supplier.objects.all().values('name', 'classification')
    suppliers_all = json.dumps(list(suppliers_all), cls=DjangoJSONEncoder)
    context = {'suppliers_all': suppliers_all,
    return HttpResponse(suppliers_all, content_type='application/json')

然后将Ajax url更改为以下内容：

                  "ajax": {
                    "url": '{% url 'myapp:supjson' %}',
                    "dataSrc": ""
                  },

虽然它有效但我觉得它是多余的解决方案，因为我直接通过变量传递数据时出现问题。

更新＃2 ：问题是由于Django自动使用单个逗号，然后使JSON解析无法正常工作。我做了以下更改：

在views.py

中添加了mark_safe

context = {'suppliers_all': mark_safe(suppliers_all),
           }

字符串化JSON，然后在index.html模板中解析它：

$(document).ready(function() {
var json=JSON.stringify({{ suppliers_all }});
    $('#mydata').DataTable( {
          "data": JSON.parse(json),

Answer 1

也许您不需要从网址加载数据。如果您的数据已预先加载，请尝试将其直接添加到DataTable。

$(document).ready(function(){
    $('#mydata').DataTable({
        "data": JSON.parse('{{ suppliers_all }}'),
        "columns": [
            {"data": "name"},
            {"data": "classification"},
        ]
    });
});

数据表Ajax在从文件读取JSON时起作用，但不从变量（Django）读取

1 个答案: