Ha pasado mucho tiempo cuando hice esta pregunta y todavía no obtuve una respuesta. Estoy tratando de agregar desplazamiento infinito hacia abajo con Django pero no funciona bien con el siguiente código. Acabo de paginar la publicación por 10 y luego solo me muestra el icono de carga. No funciona cuando me desplazo hacia abajo. ¿Pueden averiguar qué está mal aquí?
vistas.py
class PostListView(ListView): model = Post context_object_name = 'post_list' paginate_by = 10 def get_queryset(self): return Post.objects.filter(create_date__lte=timezone.now()).order_by('-create_date')postlist.html
{% extends 'base.html' %} {% block content %} <div class="container"> <div class="row infinite-container"> {% for post in post_list%} <div class="col-md-6 infinite-item"> <div class="card mb-4 shadow-sm"> <img class="img-thumbnail" src="{{post.image.url}}"/> <div class="card-body"> <h5>{{post.title}}</h5> <p class="card-text"> {{post.description|truncatewords:20}} </p> </div> </div> </div> {% endfor %} </div> {% if page_obj.has_next %} true #this is showing me true it also means that it has next page. <a class="infinite-more-link" href="?page={{page_obj.next_page_number}}"></a> {% endif %} <div class="d-flex justify-content-center" style="display:none;"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div> <script src="/static/js/jquery-2.2.4.min.js"></script> <script src="/static/js/jquery.waypoints.min.js"></script> <script src="/static/js/infinite.min.js"></script> <script> var infinite = new Waypoint.Infinite({ element: $('.infinite-container')[0], handler: function(direction) { }, offset: 'bottom-in-view', onBeforePageLoad: function () { $('.spinner-border').show(); }, onAfterPageLoad: function () { $('.spinner-border').hide(); } }); </script> {% endblock content %}Si se requiere más información que decirme en una sesión de comentarios, actualizaré mi pregunta con esa información.
Me faltaba cargar la estática, así que carga eso agregando
{% load static%}debajo del bloque de contenido
<script src="{% static '/static/js/jquery-2.2.4.min.js'%}"></script> <script src="{% static '/static/js/jquery.waypoints.min.js'%}"></script> <script src="{% static '/static/js/infinite.min.js'%}"></script>