如何在Django listview模板中显示来自queryset的JSON数据?

时间:2019-01-25 20:17:25

标签: javascript json django listview

我正在尝试将数据库中的信息显示为Django项目中的Listview模板,我已经序列化了模型并创建了JSON的网址。

我是ajax / javascrip的新手,我不明白如何进行“链接”以便能够在列表视图中显示JSON中的信息,我之所以要这样做是通过循环为模型中的每个元素进行“正常”渲染需要很多时间,并且回顾一些我发现使用JSON源的信息是一个不错的选择。

序列化并转到JSON的URL后,将呈现数据并且JSON具有有效的结构(我只显示一个,因为整个结果具有10000多个记录):

JSON from my queryset

我尝试了以下代码,但是模板中未呈现数据:

views.py

class datosview(generic.ListView):
    model = datos
    template_name = 'data/data_list.html'
    context_object_name = 'obj'


    from django.core import serializers
    from django.http import HttpResponse

    def data_json(request):
        query_set = serializers.serialize('json', datos.objects.all(),
            fields=('Insp_Lot', 'Description', 'Date', 'Material', 'Batch',
            'Mean_Valuation','Lower_Limit', 'Upper_Limit', 'Target',
            'Delvry_Quantity'))

        return HttpResponse(query_set, content_type='application/json')

urls.py

from django.urls import path
from data.views import data_json

urlpatterns =[
     path('json', data_json, name='data_json'),]

data_list.html

 <div class="panel-body">
    <table width="100%" class="table" id="dataTable">
        <thead>
            <tr>
                <th>Insp. Lot</th>
                <th>Description</th>
                <th>Date</th>
                <th>Material</th>
                <th>Batch</th>
                <th>Accep./Rejec.</th>
                <th>Result</th>
                <th>LSL</th>
                <th>USL</th>
                <th>Target</th>
                <th>Quantity</th>
            </tr>
        </thead>           
        <tbody>                
            <tr>
                <td ></td>
                <td ></td>
                <td ></td>
                <td ></td>
                <td ></td>
                <td ></td>
                <td ></td>
                <td ></td>
                <td ></td>
                <td ></td>
                <td ></td>
            </tr>                
        </tbody>      
    </table>

    <script type="text/javascript" language="javascript" class="init">
        $(document).ready(function () {
            $('#dataTable').dataTable({
                "processing": true,
                "ajax": {
                    "processing": true,
                    "url": "{% url 'data:data_json' %}",
                    "dataSrc": "",
                },
                "columns": [
                    { "data": "Insp_Lot" },
                    { "data": "Description" },
                    { "data": "Date" },
                    { "data": "Material" },
                    { "data": "Batch" },
                    { "data": "Mean_Valuation" },
                    { "data": "Lower_Limit" },
                    { "data": "Upper_Limit" },
                    { "data": "Target" },
                    { "data": "Delvry_Quantity" }
                ]
            });
        });
    </script>
</div>

在此先感谢您的帮助。

0 个答案:

没有答案