仅使用新项目（Django）刷新模板中的表格内容

Posted 2023-02-24

【中文标题】仅使用新项目（Django）刷新模板中的表格内容

【英文标题】：Refresh only the table content in a Template with new items (Django)

【发布时间】：2017-12-31 12:14:48

【问题描述】：

我正在实现一个带有过滤器的表格。 现有的库（例如 DataTables）都不适合我，因为它们是基于客户端分页的，我无法从我的数据库中获取所有数据并在客户端对其进行分页，因为它有超过 500 万个项目。

所以，问题是我希望能够在输入字段中写一些东西并相应地过滤表中的项目。 一切开始的网址是：

http://127.0.0.1:8000/es/view-containing-the-table/

这个 url 的 html 包含在 custom_table.html 中（参见下面的文件），其中包含一个名为 table_rows.html 的子模板，即 我要刷新的那个

为此，我做了以下工作：

我的项目结构：

project
|-app
  |-static
  |  |-javascript
  |    |-myJS.js
  |
  |-templates
  |  |-templates1
  |    |-custom_table.html
  |    |-table_rows.html
  |
  |-views
  |  |-__init__.py   #Gathers all the views from othe files)
  |  |-ajaxCalls.py
  |  |-modelViews.py
  |
  |-urls.py

urls.py

url(r'^table_rows/$', views.tableRows, name='tableRows'),

custom_table.html

#extend and loads here

% block content %
<table id="myTable"">
    ...
    <thead> #headers and filters for each column </thead>
    <tbody id="table_body">
        % include "templates1/table_rows.html" %
    </tbody>
</table>

% endblock %

在table的table里面，每一列都有一个input。我可以写进去，然后按回车键触发一个函数，该函数将调用以下 ajax 函数：

myJS.js

function getFilteredData()

    modelName = #get ModelName
    var filters = #get Filters

    $.ajaxSetup(
        headers:  "X-CSRFToken": getCookie("csrftoken") 
    );
    $.ajax(
        url : "../get_filtered_data/",
        type : "POST",
        data : 
            modelName: modelName,
            filters: JSON.stringify(filters)
        ,
        dataType: 'json',
        success : function(json) 
            $("#table_body").html('').load("app/views/tableRows.html", reg_list: json.result);
        ,
        error : function(xhr,errmsg,err) 
            alert('Something went wrong');
            console.log(xhr.status + ": " + xhr.responseText);
        
    );

ajaxCalls.py

def get_filtered_data(request):
    if request.method == "POST":
        try:

            [...]
            reg_list = query response with filtered Data from DB
            [...]

            return JsonResponse("status": "ok", "result":reg_list)
        except Exception as e:
            return JsonResponse("status": "none")
    else:
        return JsonResponse("status": "none")

modelViews.py

def tableRows(request):
    print("I'm in")

    return render(request, 'templates1/table_rows.html', 

)

一切正常，直到我必须在表中加载 reg_list。 Chrome 控制台中出现以下错误：

jquery-3.1.1.min.js:4 POST http://127.0.0.1:8000/es/view-containing-the-table/app/views/tableRows.html 404（未找到）

所以，显然，url 都搞砸了，因为 django 正在编写除了已经存在的视图之外的新视图。也许路由有问题？ 我不知道如何继续，请帮助。

【问题讨论】：

DataTables.net 有一个 serverSide 选项，其中分页和过滤都在服务器上完成。看看datatables.net/reference/option/serverSide 然后datatables.net/manual/server-side

我已经尝试过了，但我无法让它工作。不过，感谢您的提示。

【参考方案1】：

404 Not Found 是因为

$("#table_body").html('').load(
    "app/views/tableRows.html",
    reg_list: json.result
);

需要可作为静态资源访问，而不是视图模板。将tableRows.html 复制/移动到app/static/ 并将您的myJS.js 更新为正确的静态网址。

或者在urls.py 中定义一个与app/views/tableRows.html 匹配的视图。看起来好像只分享了@98​​7654327@ 的一部分，所以我遗漏了部分图片。