1
votes

La table de données ne remplit pas les données dans django-datatable-view

J'ai commencé un nouveau projet Django en essayant de tester django- datatable-view .

J'obtiens une erreur JS disant Uncaught TypeError: $$. each is not a function. Bien que suivant le code sur le site Web de la bibliothèque, jQuery est en cours de chargement avant datatableview.js.

models.py

  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)

views.py

XXX

urls.py

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

post_list.html

from django.urls import path
from . import views

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

erreur de console:

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

Seul l'en-tête du tableau est rendu sans que les données soient remplies. Toute idée de ce qui peut se passer. Comme je l'ai dit, la plupart des réponses ici mentionnent que jquery n'est pas chargé en premier, mais ce n'est clairement pas ce qui se passe dans le code ci-dessus.


3 commentaires

pouvez-vous également ajouter vos urls.py ici. La vue que vous avez ajoutée ci-dessus ne renvoie que des données JSON


sûr que je l'ai ajouté ci-dessus. Alors, comment suggéreriez-vous de procéder? J'essaye de suivre le guide sur la page github de la bibliothèque. il ne mentionne rien sur la manière dont les données doivent être renvoyées. Merci pour ton aide


J'ai rencontré un problème similaire lors de la mise en route de cette bibliothèque. Il semble que vous n'ayez pas créé la classe datatable qui traitera et fournira les données. J'ai trouvé la démo sur la page github ci-dessous vraiment utile. Essayez de télécharger la démo en direct sur ce github afin que vous puissiez voir le code et l'ajuster jusqu'à ce qu'il se brise plutôt que l'inverse. github.com/pivotal-energy-solutions/django-datatable-view


3 Réponses :



2
votes

J'ai eu exactement le même problème. Donc au lieu de

var table = datatable.api;

Nous devons initier la datatable donc:

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)

Et dans votre views.py, au lieu de

XXX

Vous devez faire (avec le modèle ou le query_set dans le DatatableView:

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


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

Mais alors j'obtiens le js essor suivant, tout idée? J'utilise jQuery 3.3.1 et cette version de datatable: http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

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

Je viens de trouver la raison, l'API l'appel doit être api et non api () car les () sont ajoutés dans le datatableview.js

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

Mon nouveau problème est la recherche, il renvoie une erreur de serveur 500 wichi est "FieldError ('Le champ associé a obtenu une recherche non valide: {}'. format (lookup_name))" Mais même si j'ajoute la colonne sur laquelle je veux chercher comme "title__name", j'ai toujours l'alerte dans la recherche indiquant:

Avertissement DataTables: table id = DataTables_Table_0 - Erreur Ajax. Pour plus d'informations sur cette erreur, veuillez consulter http://datatables.net/tn/7 p>


0 commentaires

0
votes

En plus de la réponse openHBP, j'ai dû mettre l'initialisation dans un document.ready:

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


0 commentaires