加载更多功能或无休止的分页

Question

我最近了解到我需要分页，否则页面加载速度不会更快。 所以我实现了它。 但是现在我完成了实施，我意识到我有一些问题。 我的网站有这样的格式

以上是页面顶部

上面是页面的下面部分。

我所有的帖子都进入下面的部分，因为我写的帖子越多，我写的帖子就越多，我实现了分页。

分页工作正常，但是当我转到下一页时，顶部仍然存在，而下面的部分显示新帖子。 （我已经实现了这一点而没有意识到顶部的存在） 我不希望我的用户每次点击下一页时都看到顶部。

我想我有两种方法可以解决这个问题。 一种是当他们单击下一页时以某种方式不显示顶部。

或者 我使用加载更多按钮来显示更多帖子，而不是进入另一个页面。

问题是我不知道如何做其中任何一个..有人可以帮我吗？

def category_detail(request, slug):

    obj = NewsCategory.objects.get(slug=slug)
    newsInCat = obj.news_set.all() #for the list of news
    paginator = Paginator(newsInCat, 25) # Show 25 contacts per page
    page = request.GET.get('page')
    try:
        news_set = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        news_set = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        news_set = paginator.page(paginator.num_pages)

    bestInCat = obj.news_set.get_bestInCat()


    context = {
        "obj":obj, 
        "news_set":news_set,
        "newsInCat":newsInCat,
        "bestInCat":bestInCat,

    }
    return render(request, "news/category_detail.html", context)    



<div class="row">
<div>
{% for news in news_set %}
  <div class='col-sm-4'>

    <div class="content">
    <figure class="story-image">
      <a href='{{news.get_absolute_url }}'><img src="{{news.get_image_url}}"  class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
    </figure>
      <div id="forever "style="margin-bottom:30px;">
      <a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><h4 style="font-size: 18px;
    font-weight: 400;">{{news.title}}</h4></a>
  </div>
        </div>
  </div>
  {% endfor %}
</div>
</div>


<div class="pagination">
    <span class="step-links">
        <!-- {% if news_set.has_previous %}
            <a href="?page={{ news_set.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ news_set.number }} of {{ news_set.paginator.num_pages }}.
        </span> -->

        {% if news_set.has_next %}
            <a href="?page={{ news_set.next_page_number }}">Load More</a>
        {% endif %}
    </span>
</div>

Answer 1

1) 如果页码等于 1，您可以在 html 中显示顶部块。例如

{% if news_set.number==1%}
    {{ top_block}}
{% endif %}
<div class="row">
<div>
{% for news in news_set %}
  <div class='col-sm-4'> ....

2) 如果请求是 ajax，你可以渲染部分 html

这是简单的代码

views.py

def category_detail(request, slug):
    obj = NewsCategory.objects.get(slug=slug)
    newsInCat = obj.news_set.all() #for the list of news
    paginator = Paginator(newsInCat, 25) # Show 25 contacts per page
    page = request.GET.get('page')
    try:
        news_set = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        news_set = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
            news_set = paginator.page(paginator.num_pages)
    if request.is_ajax():
        context = {
            'news_set':news_set
        }
        return render(request,"news/category_detail_ajax.html",context)
    else:
        bestInCat = obj.news_set.get_bestInCat()
        context = {
          "obj":obj, 
          "news_set":news_set,
          "newsInCat":newsInCat,
          "bestInCat":bestInCat,
        }
        return render(request, "news/category_detail.html", context)    

category_detail_ajax.html

{% for news in news_set %}
  <div class='col-sm-4'>

    <div class="content">
    <figure class="story-image">
      <a href='{{news.get_absolute_url }}'><img src="{{news.get_image_url}}"  class="img-rounded" alt="Cinque Terre" width="360" height="267"></a>
    </figure>
      <div id="forever "style="margin-bottom:30px;">
      <a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><h4 style="font-size: 18px;
    font-weight: 400;">{{news.title}}</h4></a>
  </div>
        </div>
  </div>
  {% endfor %}

javascript

jQuery(document).on('click','.load-more',function(e){
    e.preventDefault();
    jQuery.ajax({
        url:jQuery(this).attr('href')
    }).done(function(data){
        jQuery('.row>div').append(data);
    });
});