Question

我正在尝试在代码中使用datables js，但是我的页面仍然为空（没有标题，也没有表

我尝试对代码进行几次修改，但仍然保持空白，没有错误消息

html页面：

   {% 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。

您的Ajax URL无法正常工作：

您的代码：

 "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'),

清单留空

1 个答案: