Django Бесконечная прокрутка с использованием Django Paginate, повторяя набор запросов - PullRequest
0 голосов
/ 29 декабря 2018

Intro: Я использую ссылку ниже, чтобы добавить бесконечный свиток в мой проект https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html

ниже приведен код GitHub для этой ссылки https://github.com/sibtc/simple-infinite-scroll

Ссылка показывает, как добавить бесконечную прокрутку к function based views и class based views.Я добавил это к своему представлению на основе функций, и оно отлично работает.

Проблема: У меня 8 сообщений в моем пост-списке, который является class-based view.После добавления paginate_by = 3 я вижу только 3 поста из 8 постов.Каждый раз, когда я прокручиваю эти 3 сообщения, я повторяю их в бесконечном цикле

Мои просмотры:

class Postlist(SelectRelatedMixin, ListView):
    model = Post
    select_related = ('user', 'group')
    paginate_by = 3
    context_object_name = 'post_list'
    template_name = 'posts/post_list.html'

    def get_queryset(self):
         queryset = super(Postlist, self).get_queryset().order_by('-created_at')
         query = self.request.GET.get('q')
         if query:
             queryset = queryset.filter(
             Q(title__icontains=query)|
             Q(user__username__iexact=query)|
             Q(user__first_name__iexact=query)|
            Q(user__last_name__iexact=query)

        )
          return queryset

My Base.html: (IУ меня есть следующие файлы в папке JS, они работали для моего FBV)

    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/infinite.min.js' %}"></script>
{% block javascript %}{% endblock %}

Мой post_list.html:

<div class="col-md-8">
    <div class="infinite-container">
        {% for post in post_list %}
        <div class="infinite-item">
            {% include "posts/_post.html" %} <!---This code is good---->
        </div>
        {% empty %}
               some code    
        {% endfor %}
    </div>
    <div class="loading" style="display: none;">
        Loading...
    </div>

    {% if page_obj.has_next %}
        <a class="infinite-more-link" href="?page={{ post_list.next_page_number }}">More</a>
    {% endif %}

</div>

{% block javascript %}
  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
      }
    });
  </script>
{% endblock %}

1 Ответ

0 голосов
/ 30 декабря 2018

В шаблонах я заменил post_list на page_obj, см. Код ниже.Вот и сделал

{% if post_list.has_next %}
   <a class="infinite-more-link" href="?page={{page_obj.next_page_number }}">More</a>
{% endif %}
...