时间戳

首页 > 解决方案 > Django，数据表不在 html 模板中呈现表

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

问题描述

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

到目前为止，我发现建议：-检查表格的完整性（因此它有一个头标签和正文标签）-我有它-所有标签都必须关闭-它们已关闭-使用 Javascript 函数，如下所示：

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

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

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

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

标签： djangodatatables-1.10

解决方案

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

推荐阅读