more feature or endless pagegingをロードする

Question

私は最近、ページングが必要であることを学びました。 私はそれを実装しました。 しかし、私は実装が完了したので、私はいくつか問題があることを認識します。 私のウェブは、この

のような形式を持っている上記のページ

の上の部分で、上記ページの下の部分です。

私のすべての記事は以下の部分に入ります。より多くの投稿を投稿すると、そこに投稿されるので、私はページングを実装します。

ページネーションはうまく動作しますが、次のページに行くと上部が残り、下の部分が新しい投稿を表示します。 （私はトップ部分の存在を認識せずにこれを実装しています） 次のページをクリックするたびにトップの部分が見えるようにしたくありません。

私はこの問題を解決する方法が2つあると思います。 次のページをクリックすると、一番上の部分が表示されません。

または 別のページに移動する代わりに、より多くの投稿を表示するために、他のボタンを読み込むボタンを使用します。

問題どのようにどちらかを行う方法がわかりません。何人かが私を助けてくれますか？ HTMLで

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

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

2に等しい場合は、先頭ブロックを表示することができます）要求はここでアヤックス

ある場合には、部分的な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); 
    }); 
});