Datatables AjaxはJSONをファイルから読み込んだり、変数（Django）から読み込んだりしません

Question

私はこの問題を数日前から抱えていました。私はDataTableにJSONデータをフィードしようとしていますが、ソースとして静的ファイルを使用する場合にのみ機能します（下記の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"}] 

私はジャンゴを使用

は、変数 {{ suppliers_all }}ブラウザのデバッグを通過したが a 404 not found errorを返します。 Webサイトの例に従って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が1つのカンマを自動作成したためにJSON構文解析が機能しなくなったためです。私は次のように変更しました：

を追加しましたmark_safe views.pyで

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

おそらく、あなたがする必要はありませんURLからデータを読み込みます。データが事前にロードされている場合は、DataTableに直接追加してください。

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