Django，数据表不会在 html 模板中呈现表格

问题描述

我将视图函数中的数据作为表格发送到模板，并尝试使用数据表将表格转换为功能更强大的表格，因此我可以根据不同的列对元素进行排序... 表格本身出现......但它只是一个html结构的表格，而不是动态表格，它可以按列排序。我在关注：https://datatables.net/manual/

到目前为止，我找到了建议： -- 检查表格的完整性（所以它有一个头部标签和身体标签）- 我有 --所有标签必须关闭 - 它们已关闭 -- 使用 Javascript 函数，如下所示：

 $(document).ready( function () {
    $('#table_id').DataTable();
    } );

我不知道还有什么问题... 我不得不提......我想避免将数据保存到数据库中，只想从视图中获取数据并将其发布到模板中的表中......这就是为什么我选择数据表而不是 django_tables2......因为它似乎数据表有一种方法只是从数据渲染表...... 我的代码：

views.py：

 ...
    for Loop:
        ...
        data_list.append({'ref':ref[k],'ref_num':ref_num[k],'ref_pr':ref_pr[k]})
        k=k+1
    
    context={
        data_list,}

return render(request,'objects.html',context=context)

页面呈现，因此网址中没有错误...

html 页面：

{% extends "base_generic.html" %}
{% load static %}
{% block css %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
{% endblock %}
  <link rel="stylesheet" type="text/css" 
  href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" 
  src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
{% block content %}
<div>
    <table id='table_id' class="display">
        <thead>
            <tr>
                <th>ref</th>
                <th>ref_num</th>
                <th>ref_pr</th>
            </tr>
        </thead>
        <tbody>
            {%for data in data_list%}
                <tr>
                    <td>{{data.ref}}</td>
                    <td>{{data.ref_num}}</td>
                    <td>{{data.ref_pr}}</td>
                </tr>
            {%endfor%}
        </tbody>
    </table>
    <link rel="stylesheet" type="text/css" 
        href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" 
    src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready( function () {
        $('#table_id').dataTable();
        } );
    </script>
{% endblock %}

据我所知，一般原则是将所有脚本设置在页面下方，以便它们在序列中最后加载，因此页面加载速度会更快。但是我尝试在所有可能的地方设置脚本，包括页面和一般页面。它对我不起作用。同样从代码中可以看出，我正在尝试使用 CDN 代码，指的是数据表的服务器。

也可能是因为我使用 for 循环来填充表的数据而不起作用？但我想我在数据表教程的某处看到了 for 循环？我应该尝试什么，在这里做些额外的还是修复？如果我需要发布额外的代码，请告诉我。谢谢。

可能需要进一步修改吗？但是在手册中说，在设置脚本后，应该初始化表...

解决方法

您只需要加载 jQuery，请参阅此代码段：

  <script src="https://code.jquery.com/jquery-3.5.1.js"  crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" 
  href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" 
  src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
    <table id='table_id' class="display">
        <thead>
            <tr>
                <th>ref</th>
                <th>ref_num</th>
                <th>ref_pr</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>ref1</td>
                    <td>ref_num1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>ref2</td>
                    <td>ref_num2</td>
                    <td>1</td>
                </tr>
        </tbody>
    </table>
    <script>
        $(document).ready( function () {
            $('#table_id').dataTable();
        } );
    </script>