Question

我对Django完全陌生。我正在尝试实现数据表服务器端处理。我已经在我的models.py，views.py和urls.py中编写了一些代码，并且还遵循了Datatables的官方文档。但不幸的是，我的终端出现错误，无法弄清楚如何解决。

这里是， models.py

from django.db import models


class Products(models.Model):
    title = models.CharField(max_length=100, blank=True)
    description = models.TextField(blank=True)
    price = models.IntegerField(blank=True, null=True)

    def __str__(self):
        return self.title

views.py

from django.shortcuts import render
from ajax_crud.models import Products
from django.http import  JsonResponse

def product_json(request):
    products_json = Products.objects.all().values('title', 'description', 'price')
    data = list(products_json)
    value = JsonResponse(data, safe=False)
    print(value)
    return value

urls.py

from django.urls import path
from ajax_crud.views import product_json

urlpatterns = [
   
    path('json/',product_json,name='json'),
   
]

demo-datatbles.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    </head>
    <body>
        <h1>List of Products</h1>
        <hr>
        <table id="demo-table">
            <thead>
                <tr>
                    <th>title</th>
                    <th>description</th>
                    <th>price</th>

                </tr>
            </thead>
            <tbody></tbody>
        </table>

        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

        <script>
$(document).ready(function() {
    $('#demo-table').DataTable( {
        "processing":true,
        "serverSide": true,
        "ajax": {
            "type" : "GET",
            "url": "{% url 'json' %}",
            "dataSrc": "objects"
        },
        "columns": [
            { "data": "title" },
            { "data": "description" },
            { "data": "price" },

        ]
    } );
} );
</script>
    </body>
</html>

我在终端中的错误。

[03/Sep/2020 05:31:49] "GET /json/?draw=1&columns%5B0%5D%5Bdata%5D=title&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=description&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=price&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1599111109862 HTTP/1.1" 200 97

请有人帮我摆脱它。 我们将非常感谢您的帮助。

Answer 1

我建议分两个步骤进行操作：

显示基本数据（就像您未使用服务器端处理一样）。
添加特定的服务器端逻辑。

背景

我假定您的应用程序正在正确处理HTML模板，并在此表达式中构建有效的URL：{% url 'json' %}。

我还将假设从ajax请求发送到HTML页面的响应完全如下（即，您提供的确切JSON数据）：

[{
    "id": 1,
    "title": "Neutrogena Oil-Free Acne Wash, 177ML",
    "description": "Nice products",
    "price": 300
}, {
    "id": 2,
    "title": "Product one hello2",
    "description": "Notes",
    "price": 400
}]

如果这些假设中的任何一个都不成立，则以下内容可能无济于事。

（您可以使用浏览器的控制台来检查网页中是否接收到JSON数据响应。F12打开浏览器控制台并检查“网络”标签。）

第1步

在此步骤中，我们将继续使用"serverSide": true-因此，请不要将其删除。

您的数据表定义包含以下行：

"dataSrc": "objects"

这意味着DataTables将在JSON中查找使用该名称的对象。但是没有名为objects的对象-因此找不到数据。

因此，您需要从模板中删除该行。

但是因为您使用的是"serverSide": true，所以还需要进行更多更改。

查看我在评论中提到的链接（this one）。这描述了您在响应ajax请求时需要从服务器传递到DataTables的JSON数据。同一页面（here）上也有一个示例。

因此，我们可以获取您的JSON并使其符合该要求：

{
    "draw": 1,
    "recordsTotal": 1000,
    "recordsFiltered": 1000,
    "data": [{
        "id": 1,
        "title": "Neutrogena Oil-Free Acne Wash, 177ML",
        "description": "Nice products",
        "price": 300
    }, {
        "id": 2,
        "title": "Product one hello2",
        "description": "Notes",
        "price": 400
    }]
}

根据服务器端处理的要求，我们已将您的数据包装在一些其他数据中。您的数据现在位于名为data的对象中-DataTables希望在该对象中找到它，以填充表中的行。因此，我们不需要在这里使用"dataSrc": "data"-因为data是默认（预期）值。

在上面的示例中，我使用了1，1000和1000的值-仅用于测试。您可以使用这些值-然后我们将在下面的步骤2中对其进行修复。

因此，您需要更改Django逻辑，以便它构建上述JSON ，并将其返回到DataTables。

第2步

通常（当您不使用服务器端处理时），服务器会立即将其所有数据发送到DataTables。 DataTables处理分页，过滤和排序的所有逻辑。

但是现在，通过服务器端处理，您的Django代码将负责所有这些工作。它不会发送所有数据-一次只会发送一个小子集。这是服务器端处理的强大功能：您不会将所有1,000,000条记录发送到浏览器（这会使它崩溃）。对于每个请求，您只发送一个小的快速子集。

为此，Django需要从DataTables中读取请求。每当用户移至新页面，执行排序操作或过滤数据时，DataTable都会自动发送请求。

这是一个这样的请求-您在问题中提供的请求：

draw=1
&columns[0][data]=title
&columns[0][name]=
&columns[0][searchable]=true
&columns[0][orderable]=true
&columns[0][search][value]=
&columns[0][search][regex]=false
&columns[1][data]=description
&columns[1][name]=
&columns[1][searchable]=true
&columns[1][orderable]=true
&columns[1][search][value]=
&columns[1][search][regex]=false
&columns[2][data]=price
&columns[2][name]=
&columns[2][searchable]=true
&columns[2][orderable]=true
&columns[2][search][value]=
&columns[2][search][regex]=false
&order[0][column]=0
&order[0][dir]=asc
&start=0
&length=10
&search[value]=
&search[regex]=false

我手动URL-decoded请求，以使其更易于阅读。

此请求包含Django为了构建所需响应所需的所有信息。

例如：

start=0
length=10

这告诉您需要在响应中提供10条记录-这些将是前10条记录（第1页的索引为0）。

这：

order[0][dir]=asc

这告诉您数据需要按升序按列0（第一列-title）进行排序。

有关详细信息，请参见here。

因此，您需要在Django应用程序中编写所有这些逻辑-读取请求，然后实施其中包含的指令，以建立正确的响应。

问题：Django中的数据表服务器端处理

1 个答案: