How do I add pagination to my index.html ?

Question

Here are my codes(it works fine):

#views.py
class IndexView(generic.ListView):
    template_name = 'index.html'
    context_object_name = 'home_list'
    queryset = Song.objects.all()
    paginate_by = 1
    def get_context_data(self, **kwargs):
        context = super(IndexView, self).get_context_data(**kwargs)
        context['all_artists']=Artist.objects.all()
        context['all_songs']=Song.objects.all()
        context['all_albums']=Album.objects.all()  
        return context

base.html(which is extended by index.html):

#base.html
{% block content %}{% endblock %}
{% block pagination %}
          {% if is_paginated %}
            <div class="pagination">
              <span class="page-links">
                {% if page_obj.has_previous %}
                  <a href="{{ request.path }}?page={{ page_obj.previous_page_number}}">Previous</a>
                {% endif %}
                <span class="page-current">
                  Page {{page_obj.number}} of {{page_obj.paginator.num_pages }}
                </span>
                {% if page_obj.has_next %}
                  <a href="{{ request.path }}?page={{page_obj.next_page_number}}">Next</a>
                {% endif %}
              </span>
            </div>
          {% endif %}
          {% endblock %}

And my index.html:

{% extends 'base_generic.html' %}
{% block title %}<title>Listen to songs </title>{% endblock %}
{% block content %} 
<h3>Best Songs</h3>

{% for song in all_songs %}
<ol>
    <li><a href="{% url 'music:song_detail' song.id %}">{{song.song_title}}</a> <img src="{{song.song_logo}}" heigt=112, width=114/> <br></li>

</ol>
{% endfor %}
<h3>Best Albums</h3>
{% for album in all_albums %}
<ul>
  <li  title="{{album.album_title}}">
    <img id="img_{{album.id}}" src="{{album.album_logo}}" heigt=112, width=114 />
    <p><a href="{% url 'music:album_detail' album.id %}">{{album.album_title}}</a></p>

  </li>

</ul>
{% endfor %}


{% endblock %}

So when I compiled this, I got this window : Image here But in all pages, it stays the same.What I want is to display 1 song per page.Help guys !!!! :] :] :]

score 0 · Answer 1 · edited May 23 '17 at 12:32

Have a look here: https://www.youtube.com/watch?v=q-Pw7Le30qQ

The video explains pagination.

Alternative: https://docs.djangoproject.com/en/1.10/topics/pagination/

If you only want to display one song there is always the option to use a DetailView, which will only show one item.

Here is a stackoverflow question that describes the process for class based views: How do I use pagination with Django class based generic ListViews?

In your example: you don't have to set the queryset. Remove queryset = ### and add model = #YOURMODELNAME#.

If you want to overwrite the queryset you should do it in def get_queryset() which is a function of ListView. Like this:

class SongView(ListView):
    model = Song
    template_name = 'template_name'

    def get_queryset():
        queryset = super(SongView, self).get_queryset(**kwargs)
        queryset = #aditional filters, ordering, whatever#
        return queryset

Actually I want to show 4 songs per page, I made it 1 song per page for testing purposes.I have a total of 3 songs. I read that page, but still my code is not working properly(I mean the code works, but it shows 3 songs on page). — blacklight, Apr 13 '17 at 06:53
In your Index View: You overwrite the queryset. This will always send the full song list to the template. In a class based view, you have to set the model with model = #YOURMODELHERE#. Then you can remove the queryset = ### — Harper, Apr 13 '17 at 07:09

score 0 · Accepted Answer · answered Apr 13 '17 at 07:25

You never use your paginated objects, instead you've made a separate context variable called all_songs.

Simply just use the right context data

{% for song in all_songs %}

should be

{% for song in home_list %}

You may want to apply pagination for your other querysets too although it can get confusing paginating more than one list

How do I add pagination to my index.html ?

2 Answers2