Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

168
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!