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

如何解决问题: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

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

解决方法

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

  1. 显示基本数据(就像您未使用服务器端处理一样)。

  2. 添加特定的服务器端逻辑。

背景

我假定您的应用程序正在正确处理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是默认(预期)值。

在上面的示例中,我使用了110001000的值-仅用于测试。您可以使用这些值-然后我们将在下面的步骤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 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-