使用 Django-datatable-view 不显示数据表

Question

I'm trying to implement datatables.js using django-datatable-view, (not to be confused with django-datatables-view), and have started with the zero configuration datatable type:我正在尝试使用 django-datatable-view 实现 datatables.js，（不要与 django-datatables-view 混淆），并且已经从零配置数据表类型开始：

http://django-datatable-view.appspot.com/zero-configuration/http://django-datatable-view.appspot.com/zero-configuration/

I've copied the template and view class implementations to my app and the page displays, but without content.我已将模板和视图类实现复制到我的应用程序和页面显示中，但没有内容。 The headers are present, but the content is completely absent.标题存在，但内容完全不存在。 If I add the {{ object_list }} to the template, then a truncated list of the queryset objects is displayed, but the table is not rendered.如果我将 {{ object_list }} 添加到模板中，则会显示查询集对象的截断列表，但不会呈现表。

Here is my base.py这是我的 base.py

{% load static i18n %}
<html>

<head>
    {% block static %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <title>{% block page_title %}{% endblock %}</title>
    <meta name="description" content="{% block description %}{% endblock %}">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="application-name" content="core-Net.uk" />
    {# Bootstrap #}
    <!-- Bootstrap Core CSS -->
    <link href="{% static 'core/site/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <!-- toastr -->
    <link href="{% static 'core/toastr/toastr.min.css' %}" rel="stylesheet" >

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    <!-- Star rating -->
    <link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
    <!-- Custom CSS -->
    <link href="{% static 'core/site/css/site.css' %}" rel="stylesheet" >

    {# jQuery #}
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

    {# datatables.js #}
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="{% static 'datatables/datatables.min.css' %}"/>
    <script type="text/javascript" src="{% static 'datatables/datatables.min.js' %}></script>

    {# django-datatable-view #}
    <script type="text/javascript" charset="utf8" src="{% static 'core/js/datatableview.js' %}"></script>
    <script type="text/javascript" charset="utf8" src="{% static 'core/js/datatableview.min.js' %}"></script>

    {# code highlighting #}
    <link href="{% static 'core/syntaxhighlighter/shCore.css' %}" rel="stylesheet" type="text/css" />
    <link href="{% static 'core/syntaxhighlighter/shThemeDefault.css' %}" rel="stylesheet" type="text/css" />
    <script src="{% static 'core/syntaxhighlighter/shCore.js' %}" type="text/javascript"></script>
    <script src="{% static 'core/syntaxhighlighter/shAutoloader.js' %}" type="text/javascript"></script>
    <script src="{% static 'core/syntaxhighlighter/shBrushPython.js' %}" type="text/javascript"></script>
    <script type="text/javascript" charset="utf8">
        datatableview.auto_initialize = true;
        $(function(){
            datatableview.initialize('.datatable');
        });
    </script>
    </script>

    {# test_project helpers #}
    <style type="text/css">
        .nav.sidebar a {
            border-right: 1px solid white;
            padding: 5px 10px;
        }
        .nav.sidebar a.active {
            font-weight: bold;
            background-color: #f0f0f0;
            border-color: #428bca;
        }
        .nav.sidebar li.divider {
            margin: 0.5em;
            border-top: 1px solid #dfdfdf;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            SyntaxHighlighter.all();
            var path = window.location.pathname;
            $('.nav.sidebar > li > a[href="'+path+'"]').addClass("active");
        });
    </script>
    {% endblock static %}

    <!-- Favicon -->


    {% block css %}{% endblock %}

    {% block extra_head %}{% endblock %}
    <!-- Cookie Consent -->
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
    <script>
    window.addEventListener("load", function(){
    window.cookieconsent.initialise({
    "palette": {
        "popup": {
        "background": "#edeff5",
        "text": "#838391"
        },
        "button": {
        "background": "#4b81e8"
        }
    },
    "theme": "edgeless",
    "position": "bottom-right",
    "content": {
        "href": "/legal/privacy-policy/"
    }
    })});
    </script>
</head>

Here is the template:这是模板：

{% extends 'base.html' %}
{% load static i18n %}
<script type="text/javascript" charset="utf8">
    datatableview.auto_initialize = true;
    $(function(){
        datatableview.initialize('.datatable');
    });
</script>
{% block content %}

    {{ datatable }}
    {{ object_list }}

{% endblock content %}

and here is the view:这是视图：

class ZeroConfigurationDatatableView(DatatableView):

  model = SSTnp
  template_name = 'core/sstnp_list.html'

  class datatable_class(Datatable):

    class Meta:
      model = SSTnp
      structure_template = 'datatableview/default_structure.html'

result:结果：

ID   Name   Location
<QuerySet [<SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>,  <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, <SSTnp: SSTnp object (ss )>, '...(remaining elements truncated)...']>

As I've basically just copied this directly from the example app of the package, I would expect it to render the table similarly.因为我基本上只是直接从包的示例应用程序中复制了它，所以我希望它能够以类似的方式呈现表格。 Clearly, however, I've got something going wrong.然而，很明显，我出了点问题。

Answer 1

So after much frustration.所以在经历了很多挫折之后。 I figured out that the issue was due to the import order in my base.html file.我发现问题是由于我的 base.html 文件中的导入顺序造成的。 I hope this helps somebody else with this issue.我希望这可以帮助其他人解决这个问题。

Essentially, I was receiving two errors that prevented the proper display of my tables.本质上，我收到了两个错误，这些错误阻止了我的表格的正确显示。

First Error: Error("Bootstrap's JavaScript requires jQuery")第一个错误： Error("Bootstrap's JavaScript requires jQuery")

This was due to Bootstrap's jQuery imports being prior to the base jQuery imports.这是因为 Bootstrap 的 jQuery 导入先于基础 jQuery 导入。

Second Error: Deferred exception: datatable.DataTable is not a function TypeError第二个错误： Deferred exception: datatable.DataTable is not a function TypeError

This was similarly due to the DataTable.js jQuery imports being prior to the base jQuery imports.这同样是因为 DataTable.js jQuery 导入在基本 jQuery 导入之前。

Simple detail, but good to know for the future.简单的细节，但很高兴知道未来。

使用 Django-datatable-view 不显示数据表

问题描述

1 个解决方案

解决方案1
2 2019-01-12 17:11:04

使用 Django-datatable-view 不显示数据表

问题描述

1 个解决方案

解决方案1 2 2019-01-12 17:11:04

解决方案1
2 2019-01-12 17:11:04