Question

我已经开始尝试尝试django-datatable-view的新Django项目。

我收到一个JS错误，提示未捕获的TypeError：$$。each不是一个函数。尽管遵循图书馆网站上的代码，但jQuery是在datatableview.js之前加载的。

models.py

import re
import requests
from bs4 import BeautifulSoup

site = 'http://pixabay.com'

response = requests.get(site)

soup = BeautifulSoup(response.text, 'html.parser')
img_tags = soup.find_all('img')

urls = [img['src'] for img in img_tags]

for url in urls:
    filename = re.search(r'/([\w_.-]+)$', url)
    with open(filename.group(1), 'wb') as f:
        if 'http' not in url:
            # sometimes an image source can be relative
            # if it is provide the base url which also happens
            # to be the site variable atm.
            url = '{}{}'.format(site, url)
        response = requests.get(url)
        f.write(response.content)

views.py

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

urls.py

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

post_list.html

from django.urls import path
from . import views

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

控制台错误：

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

仅在不填充数据的情况下呈现表头。关于可能发生的事情的任何想法。正如我所说的，这里的大多数答案都提到并没有首先加载jquery，但这显然不是上面代码中的情况。

Answer 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（'相关字段的查找无效：{}'。format（lookup_name））” 但是，即使我添加了要在其上搜索的列，例如“ title__name”，我仍然在搜索中显示警告：

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

Answer 2

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

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

Answer 3

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

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

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

3 个答案: