数据表未在 django-datatable-view 中填充数据答案

【问题标题】：Data table not populating data in django-datatable-view数据表未在 django-datatable-view 中填充数据
【发布时间】：2019-07-11 09:58:06
【问题描述】：

我已经开始了一个新的 Django 项目，试图测试 django-datatable-view。

我收到一个 JS 错误，说 Uncaught TypeError: $$.each is not a function。虽然遵循库网站上的代码 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，但这显然不是上面代码中发生的事情。

【问题讨论】：

你也可以在这里添加你的 urls.py。您在上面添加的视图仅返回 JSON 数据
确定我已经在上面添加了。那么你会如何建议呢？我正在尝试按照图书馆 github 页面上的指南进行操作。它没有提及应如何返回数据。感谢您的帮助
我在开始使用这个库时遇到了类似的问题。看起来您还没有创建将处理和提供数据的数据表类。我发现下面 github 页面上的演示非常有帮助。尝试在此 github 下载现场演示，以便您可以查看代码并对其进行调整，直到它中断而不是相反。 github.com/pivotal-energy-solutions/django-datatable-view

标签： jquery django datatables django-datatable

【解决方案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"]

您必须这样做（使用 DatatableView 中的模型或 query_set：

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 和这个版本的数据表：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('Related Field got invalid lookup: {}'.format(lookup_name))" 但即使我添加了我想要搜索的列，如“title__name”，我仍然在搜索中显示警报：

DataTables 警告：表 id=DataTables_Table_0 - Ajax 错误。有关此错误的更多信息，请参阅http://datatables.net/tn/7

【讨论】：

【解决方案2】：

我认为代码属于 0.8 版本，并且您已将软件包更新到 0.9。如果是这种情况，您可以查看迁移指南here

0.9 版本有多个重大更改。它不再支持类中的datatable_options，而是转移到Meta类

【讨论】：

即使我没有传递 datatable_options 数据也不会被渲染。有什么想法吗？
您能否提供有关该错误的更多信息。也许从 chrome 控制台发布堆栈跟踪
我已经编辑了我最初的问题。感谢您的帮助

【解决方案3】：

除了 openHBP 答案之外，我还必须将初始化放在 document.ready 中：

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

【讨论】：