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

Question

我将视图函数中的数据作为表格发送到模板，并尝试使用数据表将表格转换为功能更强大的表格，因此我可以根据不同的列对元素进行排序... 该表本身出现......但它只是一个 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)

页面已呈现，因此 url 中没有错误...

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 循环？我应该在这里尝试什么、做额外的或修复什么？如果我需要发布额外的代码，请告诉我。谢谢。

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

Answer 1

你也只需要加载 jQuery，看这个 sn-p:

  <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>