Django Infinite Scroll, все появляется, но без прокрутки, только кнопка «еще» - PullRequest
Новая
       24

Django Infinite Scroll, все появляется, но без прокрутки, только кнопка «еще»

0 голосов
/ 18 сентября 2018

Я хочу использовать бесконечную прокрутку django на странице своего блога, где перечислены все мои сообщения, я следовал руководству, но у меня возникла проблема, мои сообщения появляются, и они показывают только сумму, указанную в представлении, НО, прокрутка неработать, мне нужно нажать на кнопку «еще», чтобы увидеть следующую страницу

модель 

class Post(models.Model):
    title = models.CharField(max_length = 140)
    slug = models.SlugField(max_length=40, blank=True)
    image = models.ImageField(upload_to="media", blank=True)
    body = RichTextField(config_name='default')
    date = models.DateField()
    #sites = models.ManyToManyField(Site)
    sites = models.ForeignKey(Site,null=True, on_delete=models.CASCADE)

    def __str__(self):
        return self.slug

def approved_comments(self):
    return self.comments.filter(approved_comment=True)

url 

url(r'^$', views.listingPost, name='blog'),

просмотр 

def listingPost(request):
    post_list = Post.objects.all().order_by("-date")
    page = request.GET.get('page', 1)
    paginator = Paginator(post_list, 6)
    try:
        post = paginator.page(page)
    except PageNotAnInteger:
        post = paginator.page(1)
    except EmptyPage:
        post = paginator.page(paginator.num_pages)
    return render(request, 'blog/blog.html', {'post': post})

в html 

.infinite-item, .loading {
      margin-bottom: 5px;
      background-color: #1eaedb;
      color: #fff;
      text-align: center;
      padding: 25px 0;
    }
    .loading {
      background-color: #333;

<div class="infinite-container waypoint">
    {% for post in post %}
    <div class="infinite-item">{{ post.title }}</div>
    {% endfor %}
</div>

<div class="loading" style="display: none;">
    Loading...
</div>

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

<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>

<script>
    var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0]
    });
</script>
...