Datatable не отображается с использованием Django-datatable-view - PullRequest
0 голосов
/ 11 января 2019

Я пытаюсь реализовать datatables.js, используя django-datatable-view (не путать с django-datatables-view), и начал с типа данных с нулевой конфигурацией:

http://django -datatable-view.appspot.com / нулевой конфигурации /

Я скопировал реализации шаблонов и классов в свое приложение, и страница отображается, но без содержимого. Заголовки присутствуют, но содержание полностью отсутствует. Если я добавлю {{object_list}} в шаблон, отобразится усеченный список объектов набора запросов, но таблица не будет отображена.

Вот мой 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> 

Вот шаблон:

{% 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 %}

и вот вид:

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'

результат:

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)...']>

Поскольку я в основном только что скопировал это непосредственно из примера приложения пакета, я ожидал, что он отобразит таблицу аналогично. Однако ясно, что у меня что-то не так.

1 Ответ

0 голосов
/ 12 января 2019

Так что после большого разочарования. Я понял, что проблема связана с порядком импорта в моем файле base.html. Я надеюсь, что это поможет кому-то еще в этом вопросе.

По сути, я получал две ошибки, которые мешали правильному отображению моих таблиц.

Первая ошибка: Error("Bootstrap's JavaScript requires jQuery")

Это произошло из-за импорта jQuery в Bootstrap до базового импорта jQuery.

Вторая ошибка: Deferred exception: datatable.DataTable is not a function TypeError

Аналогично это происходило из-за импорта jQuery в DataTable.js до базового импорта jQuery.

Простая деталь, но полезно знать о будущем.

...