如何解决问题:Django中的数据表服务器端处理
我对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
请有人帮我摆脱它。 我们将非常感谢您的帮助。
解决方法
我建议分两个步骤进行操作:
-
显示基本数据(就像您未使用服务器端处理一样)。
-
添加特定的服务器端逻辑。
背景
我假定您的应用程序正在正确处理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,"price": 300
},{
"id": 2,"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应用程序中编写所有这些逻辑-读取请求,然后实施其中包含的指令,以建立正确的响应。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。