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

加载更多功能或无尽的分页

1 个答案: