无法让数据表与 django 生成的表一起使用答案

【问题标题】：can't get datatables work with a django generated table无法让数据表与 django 生成的表一起使用
【发布时间】：2023-03-13 15:12:01
【问题描述】：

我正在尝试在 django 应用程序中使用数据表。这是我的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My  web application </title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css" title="currentStyle">
    @import "./DataTables-1.9.0/media/css/demo_table.css";
</style>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./DataTables-1.9.0/media/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
    $('#table_id').dataTable();
    } );
</script>
</head>
<body>
    {% if success %}
        <form action="." method="POST">
        {{ my_form.as_p }}
        <input type="submit" value="Send">
        <input type="reset" value="Reset">
        </form>
        <br>
    <table id="table_id" class="display">
    <thead> <tr>
    {%for x in htl%}
        <th> {{x}} </th>
    {% endfor%}
    </tr>
    </thead>
    <tbody>
    {% for x in mytable %}
        <tr>
        {% for y in x %}
            <td> {{y}} </td>
        {%endfor %}
        </tr>
    {% endfor%}
    </tbody>
    </table>
    {% else %}
        <form action="." method="POST">
        {{ my_form.as_p }}
        <input type="submit" value="Send">
        <input type="reset" value="Reset">
        </form>

    {% endif %}
</body>
</html>

我想传递一个 python 列表，其中每一行作为列表中的一个项目，并在 template.html 中格式化表格，如代码所示。我根本无法让数据表工作。有任何想法吗？谢谢

【问题讨论】：

只是一个快速的猜测，但我会说必须在加载 javascript 之前进行样式导入。
我将样式导入移到了 javascript 之上，但没有任何改变，不过感谢您的输入。

标签： javascript jquery django datatables

【解决方案1】：

我认为你的 HTML 可能不好：

<thead> <tr>
{%for x in htl%}
    <th> {{x}} </th>
{% endfor%}
</th>
</thead>

第二个</th> 应该是</tr>

另外，你可能想看看这个：https://github.com/eire1130/Django_datatables

这是我为简化将数据表嵌入 django 模板而编写的包装器。

另外，我注意到您正在使用 {% block %}，但我没有看到您在扩展什么？

编辑配置媒体和静态文件：

在 settings.py 的最顶部添加以下行：

import os
ROOT_PATH = os.path.dirname(__file__)

（你应该在你所有的项目中都这样做，这样做会为你以后省去很多麻烦）

另外，在你的 settings.py 中，你应该在文件的中途查看四行（实际上是两行，但我们也会同时进行静态处理）

MEDIA_ROOT = os.path.join(ROOT_PATH, 'media/')
MEDIA_URL = 'http://127.0.0.1:8000/media/'

以上将在 myproject/media 这样的导向器中设置您的媒体文件，您的应用位于 myproject/myapp

STATIC_ROOT = os.path.join(ROOT_PATH, 'static/')
STATIC_URL = 'http://127.0.0.1:8000/static/'

以上将在 myproject/static 等目录中设置您的静态文件，您的应用位于 myproject/myapp 中。

在 settings.py 所在的同一目录中，如果您的旧 urls.py 已经在这里，则创建一个名为“urls.py”的文件，将其移动到您的应用程序文件夹，因此您的旧 urls.py 应该位于myproject/myapp/urls.py.

您的新 urls.py 应位于 myproject/urls.py

在这个新的完全空白的 python 文件中，添加以下行：

from django.conf.urls.defaults import patterns, include, url
from django.conf import settings


urlpatterns = patterns('',
    (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT }),
    (r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT }),
    (r'^', include('myproject.myapp.urls')),

)

请注意最底部的“包含”。显然，您需要更改它以反映您的项目和应用名称。

现在已经设置好了，您需要创建一个位于 myproject/media 的媒体文件夹。你应该对 /static 做同样的事情。

在此目录中，您应该放置您关心的所有媒体文件。例如，我有一个名为“plugins”的文件夹，里面有数据表。路径是这样的：myproject/media/plugins/datables，然后里面有所有的datatables文件。

现在，在您的模板中，将链接指向目录：

'/media/plugins/datatables/media/js/jquery.dataTables.min.js'

注意没有“。”一开始，没有@include。只是网址。

这应该为您设置数据表并允许同时提供媒体。在生产环境中，您不会完全这样做，但是对于原型设计和学习，这将很好地工作

【讨论】：

使用 {% block %} 并不一定意味着他在扩展另一个模板。显示的模板也可以是基本模板，并且块标签可以覆盖子模板中的这些部分。
@marue 我知道，我只是想知道他是否向我们展示了代码 sn-p，或者是否缺少信息。
我将 cmets 中提到的两个更改为（感谢您的关注），我还将样式导入移到了 javascript 代码上方。更新的代码被替换为问题中的旧代码，但仍然无法正常工作。我查看了 Django_datatables 并尝试使用 load_once 示例，但我似乎无法让它与我的应用程序一起使用，感谢您的帮助。
@biomed 不使用数据表，HTML 表是否按预期呈现（只需取出对数据表的 javascript 调用）？
@biomed 在这种情况下，您使用的是萤火虫吗？开发者控制台中是否出现任何错误？