Django，datatables 不在 html 模板中呈现 table

Question

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

到目前为止我发现了以下建议： -- 检查 table 的完整性（所以它有一个 head 标签和 body 标签）- 我有 --all tags must be closed - 它们是关闭的 -- 使用 Javascript 函数，像这样：

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

我不知道还有什么问题... 我不得不提...我想避免将数据保存到数据库中，只是想从视图中获取数据并将其 post 到模板中的 table ...这就是我选择的原因datatables over django_tables2... 因为看起来 datatables 有办法从数据中渲染 tables... 我的代码：

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 代码，指的是数据服务器 tables.

也可能它不起作用，因为我正在使用 for 循环为 table 填充数据？但我想我在数据tables 的教程中某处看到了for 循环？我应该尝试什么，做额外的或修复这里？如果我需要 post 额外的代码，请告诉我。谢谢。

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

Answer 1

您也只需要加载 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>

Django，datatables 不在 html 模板中呈现 table

Django, datatables doesn't render table in html template

django

datatables-1.10