Data table not populating data in django-datatable-view

Question

I've started a new Django project with trying to test out django-datatable-view.

I'm getting a JS error saying Uncaught TypeError: $$.each is not a function. Although following the code on the library's website jQuery is being loaded before 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 }}

console error:

  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)

Only the table header is being rendered without the data being populated. Any ideas as to what may be going on. As I said most of the answers on here are mentioning that jquery isn't being loaded first but this clearly isn't what is going on in the code above.

Answer 1

I had exactly the same issue. So instead of

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

We have to init datatable so:

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

And in your views.py, instead of

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

You have to do (with the model or the query_set in the DatatableView:

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


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

But then I get the following js essor, any idea? I'm using jQuery 3.3.1 and this version of 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)

I just found the reason, the api call must be api and not api() because the () are added in the datatableview.js

var table = datatable.api;

My new issue is the search, it returns a 500 server error wichi is "FieldError('Related Field got invalid lookup: {}'.format(lookup_name))" But even if I add the column on which I want to search like "title__name", I still have the alert in the search stating:

DataTables warning: table id=DataTables_Table_0 - Ajax error. For more information about this error, please see http://datatables.net/tn/7

Answer 2

I think the code belongs to 0.8 version and you've updated your package to 0.9. If that's the case you can look at the migration guide here

the 0.9 version has multiple breaking changes. It no longer supports datatable_options in the class instead, things are shifted to Meta class

Answer 3

In addition to openHBP answer, I had to put the initilization in a document.ready :

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