load more feature or endless pagination

I recently learnt I need pagination otherwise page won't load faster. so I implemented it. But now that I finished implemented, I realize I have some problem. My web has a format like this enter image description here

The above is the top part of the page enter image description here

and the above is the below part of the page.

all my posts are going into the below part, and because more posts I write more posts will be there I implemented pagination.

the pagination works fine, but when I go to the next page the top part remains there while the below part shows new posts. (I have implemented this without realizing the existence of the top part) I don't want my users to see the top part every time they click next page.

I think I have two ways to solve this problem. One is to somehow not show the top part when they click next page.

Or I use load more button to show more posts instead of going into another page.

Problem is I don't know how to do either one of them..can some one please help me?

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>

Answers 1

  • 1) in the html you can show top block if page number equals 1. For example

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

    2) you can render partial html if request is ajax

    Here is simple code

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

Related Articles