1

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.

Improve this question
3
  • can you also add your urls.py here. The view you added above only returns JSON data Commented Feb 18, 2019 at 5:24
  • sure i've added it above. So how would you suggest going about this? I'm trying to follow the guide on the library's github page. it doesn't mention anything about how the data should be returned. Thanks for your help Commented Feb 18, 2019 at 6:21
  • I ran into a similar problem when getting started with this library. It looks like you haven't created the datatable class which will process and supply the data. I found the demo on the github page below really helpful. Try downloading the live demo at this github so that you can see the code and tweak it until it breaks rather than the opposite. github.com/pivotal-energy-solutions/django-datatable-view Commented Feb 20, 2019 at 13:18

3 Answers 3

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

3 Comments

even if i don't pass the datatable_options the data isn't being rendered. Any ideas?
can you provide more info on the error. maybe post the stacktrace from chrome console
i've edited my initial question. Thanks for your help
0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.