Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

169
Vistas
La barra de desplazamiento infinita no funciona con django

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.

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

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>
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda