Список остается пустым

Question

Я пытаюсь использовать datables js в своем коде, но моя страница остается пустой (без заголовка и без таблицы

Я пробовал несколько изменений в коде, но все еще остается пустой страницей без сообщения об ошибке

html page:

   {% extends "baseCRM.html" %}
{% load bootstrap4 %}
<link rel="stylesheet" type="text/css" href="/static/DataTables/datatables.css">
<script type="text/javascript" charset="utf8" src="/static/DataTables/datatables.js"></script>

{% block content %}
     <table cellpadding="0" cellspacing="0" border="0" id="example">
        <thead>
            <tr><th>Client List</th></tr>
        </thead>
     <tbody></tbody>
    </table>


<script type="text/javascript" language="javascript" class="init">
     $(document).ready(function() {
         $('#example').dataTable( {
             "processing": true,
             "ajax": {
                 "processing": true,
                 "url": "{% url 'clientListJson' %}",
                 "dataSrc": ""
             },

             "columns": [
                     { "data": "fields.name" },
                     { "data": "pk" }
                 ]
         } );
     } );
 </script>

   {% endblock %}

views.py:

def client_list_json(request):
    object_list = Client.objects.all().order_by("name")
    json = serializers.serialize('json', object_list)
    return HttpResponse(json, content_type='application/json')

model.py

class Client(models.Model):
    name = models.CharField(max_length=255,)
    description = models.CharField(max_length=255,blank=True)
    address1 = models.CharField("Address line 1",max_length=1024,)
    address2 = models.CharField("Address line 2",max_length=1024,)
    zip_code = models.CharField("ZIP / Postal code",max_length=12,)
    city = models.CharField("City",max_length=1024,)
    country = models.CharField("Country",max_length=3,choices=ISO_3166_CODES,)
    point_person = models.ForeignKey(User, limit_choices_to={'is_staff': True}, on_delete=models.CASCADE) # in charge of the client (admin)
    firm = models.ManyToManyField(Firm, related_name='Firm_Client',)

urls.py

path ('client_list_json /', views.client_list_json, name = 'clientListJson'),

У меня должен быть список клиентов с именем, описанием, фирмой и point_person

Answer 1

Здесь я использую jQuery CDN, DataTable CDN.

Ваш URL Ajax не может работать должным образом:

Ваш код:

 "ajax": {
             "processing": true,
             "url": "{% url 'clientListJson' %}",
             "dataSrc": ""
         },

Код обновления:

"ajax": {
             "processing": true,
             "url": "clientListJson",
             "dataSrc": ""
         },

**

Вот полная версия кода.

**

HTML-страница: я называю ее anothor.html

another.html

{% extends "baseCRM.html" %}
{% load bootstrap4 %}


{% block content %}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>

<table id="myTable">

</table>


<script type="text/javascript" class="init">
     $(document).ready(function() {
         $('#myTable').dataTable( {
             "processing": true,
             "ajax": {
                 "processing": true,
                 "url": "clientListJson",
                 "dataSrc": ""
             },

             "columns": [
                    { "data": "pk" },
                    { "data": "fields.name" },
                    { "data": "fields.description" },
                    { "data": "fields.address1" },
                    { "data": "fields.zip_code" },
                    { "data": "fields.city" },
                 ]
         } );
     } );
 </script>

{% endblock %}

Views.py

def client_list_json(request):
    object_list = Client.objects.all().order_by("name")
    from django.core import serializers
    json = serializers.serialize('json', object_list)
    return HttpResponse(json, content_type='application/json')


def another(request):
    return render(request, 'anothor.html', context=None)

urls.py

Добавьте один дополнительный URL-адрес для теста.

    path('another/', views.another, name='another'),
    path('another/clientListJson/', views.client_list_json, name='clientListJson'),