javascript - 加载更多功能或无限分页

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) 在 html 中，如果页码等于 1，您可以显示顶部 block 。例如

{% 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);
    });
});