Таблица данных не заполняет данные в django-datatable-view

Я начал новый проект Django с попытки протестировать django-datatable-view.

Я получаю сообщение об ошибке JS о том, что Uncaught TypeError: $$. Каждый не является функцией. Несмотря на то, что, следуя коду на веб-сайте библиотеки, jQuery загружается до datatableview.js.

models.py

from django.db import models
class Post(models.Model):
    title= models.CharField(max_length=150)
    body = models.TextField()
    created = models.DateField()

views.py

from datatableview.views import DatatableView
from .models import Post
class MyView(DatatableView):
    model = Post
    datatable_options = {
        'columns': [
            'title',
            'body',
            'created',
            ]
    }

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.MyView.as_view(), name='myview'),
]

post_list.html

{% load static %}
<!-- myapp/mymodel_list.html -->

<!-- Load dependencies -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<!-- Load js for initializing tables via their server-side options -->
<script type="text/javascript" charset="utf8" src="{% static 'js/datatableview.js' %}"></script>
<script type="text/javascript">
    $(function(){
        datatableview.initialize('.datatable');
    });
</script>

<!-- Render the table skeleton, includes the .datatable class for the on-ready initializer. -->
{{ datatable }}

ошибка консоли:

  query-3.3.1.min.js:2 jQuery.Deferred exception: $$.each is not a 
   function TypeError: $$.each is not a function
        at Object.initialize 
   (http://127.0.0.1:8000/static/js/datatableview.js:20:12)
        at HTMLDocument.<anonymous> (http://127.0.0.1:8000/:17:23)
        at l (https://code.jquery.com/jquery-3.3.1.min.js:2:29375)
        at c (https://code.jquery.com/jquery-3.3.1.min.js:2:29677) 
    undefined
    w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
    c @ jquery-3.3.1.min.js:2
    setTimeout (async)
    (anonymous) @ jquery-3.3.1.min.js:2
    u @ jquery-3.3.1.min.js:2
    fireWith @ jquery-3.3.1.min.js:2
    fire @ jquery-3.3.1.min.js:2
    u @ jquery-3.3.1.min.js:2
    fireWith @ jquery-3.3.1.min.js:2
    ready @ jquery-3.3.1.min.js:2
    _ @ jquery-3.3.1.min.js:2
    jquery-3.3.1.min.js:2 Uncaught TypeError: $$.each is not a function
        at Object.initialize (datatableview.js:20)
        at HTMLDocument.<anonymous> ((index):17)
        at l (jquery-3.3.1.min.js:2)
        at c (jquery-3.3.1.min.js:2)

Отображается только заголовок таблицы без заполнения данных. Любые идеи относительно того, что может происходить. Как я сказал, большинство ответов здесь упоминают, что jquery не загружается первым, но это явно не то, что происходит в приведенном выше коде.

Источник

1 ответ

У меня была точно такая же проблема. Так что вместо

<script type="text/javascript">
    $(function(){
        datatableview.initialize('.datatable');
    });
</script>

Мы должны инициализировать данные так:

<script type="text/javascript">
    var opts = {};
    var datatable = datatableview.initialize($('.datatable'), opts);
    var table = datatable.api();
</script>

И в твоих views.py, а не

class MyDatatableView(DatatableView):
    model = Revenue
    columns = ["title", "body", "created"]
    search_fields = ["title", "body"]

Вы должны сделать (с моделью или query_set в DatatableView:

class MyDatatable(Datatable):
    class Meta:
        columns = ["title", "body", "created"]
        search_fields = ["title", "body"]


class MyDatatableView(DatatableView):
    model = Revenue
    datatable_class = MyDatatable

Но тогда я получаю следующий JS Essor, есть идеи? Я использую jQuery 3.3.1 и эту версию datatable: http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

Uncaught TypeError: datatable.api is not a function
    at HTMLDocument.<anonymous> (datatable:187)
    at c (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.H (jquery.min.js:3)

Я только что нашел причину, вызов API должен быть API, а не Api(), потому что () добавляются в datatableview.js

var table = datatable.api;

Моя новая проблема - поиск, он возвращает 500-ю ошибку сервера, которая выглядит так: "FieldError('Связанное поле получило недопустимый поиск: {}'. Format(lookup_name))" Но даже если я добавлю столбец, по которому я хочу выполнить поиск как "title__name", у меня все еще есть предупреждение в поиске, заявляющее:

Предупреждение DataTables: идентификатор таблицы =DataTables_Table_0 - ошибка Ajax. Для получения дополнительной информации об этой ошибке, пожалуйста, смотрите http://datatables.net/tn/7

Источник

В дополнение к ответу openHBP мне пришлось поместить инициализацию в документ.

<script type="text/javascript">                                                    
    $(document).ready(function() {                                                 
        var opts = {};                                                             
        var datatable = datatableview.initialize($('.datatable'), opts);           
        var table = datatable.api;                                                 
    } );                                                                           
</script>
Источник

Я думаю, что код принадлежит версии 0.8, а вы обновили свой пакет до 0.9. Если это так, вы можете посмотреть руководство по миграции здесь

версия 0.9 имеет множество критических изменений. Больше не поддерживает datatable_options вместо этого в классе все меняется Meta учебный класс

Источник
Другие вопросы по тегам