How to paginate bootstrap cards with django

Question

I am getting my query results based on user selection and showing them on bootstrap cards in django. I am using django Paginator to display at max 6 results per page (currently set to 1 for testing). The problem is my Paginator is showing all the results on all the pagination pages.

Could someone please help me??

View:

def results(request):
results = []
query_city = request.GET.get('city')
print(query_city)
all_records = hotel.objects.all()
for states in all_records:
    if states.confirm_approval and states.space_state == query_city:
        print(states)
        results.append(states)

paginator = Paginator(results,1)
page = request.GET.get('page')

try:
    items = paginator.page(page)
except PageNotAnInteger:
    items = paginator.page(1)
except EmptyPage:
    items = paginator.page(paginator.num_pages)
index = items.number - 1
max_index = len(paginator.page_range)
start_index = index - 5 if index >= 5 else 0
end_index = index + 5 if index <= max_index - 5 else max_index
page_range = paginator.page_range[start_index:end_index]
context = {
    'results':results,
    'items':items,
    'page_range':page_range,  
}

return render(request, 'results/results.html', context)

Html Template:

% for result in results %}
    {% if forloop.counter0|divisibleby:3 %} <div class="row"> {% endif %}
        <div class="col">
            <div class="card-deck" id="cardholder">
                <div class="card" style="max-width: 20rem;">
                    <img class="card-img-top" src="{% static 'mainpage/img/bg/books.jpg' %}" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">{{ result.hotel_name }}</h5>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Show more</a>
                    </div>
                </div>
            </div>
        </div>
        {%  if forloop.counter|divisibleby:3 or forloop.last %}</div><!-- row closing -->{%  endif %}
    {%  endfor %}
    {% if items.has_other_pages %}
    <nav aria-label="">
        <ul class="pagination justify-content-center">
            {% if items.has_previous %}
            <li class=class="page-item">
                <a class="page-link"
                    href="?page={{items.previous_page_number}}{% if request.GET.city %}&city={{ request.GET.city }}{% endif %}"
                    tabindex="-1">Previous</a>
            </li>
            {% else %}
            <li class="page-item disabled"><a class="page-link">Previous</a></li>
            {% endif %}
            {% for i in page_range %}
            {% if items.number == i %}
            <li class="page-item active"><a class="page-link" href="#">{{i}} <span
                        class="sr-only">(current)</span></a>
            </li>
            {% else %}
            <li class="page-item"><a class="page-link"
                    href="?page={{i}}{% if request.GET.city %}&city={{ request.GET.city }}{% endif %}">{{i}}</a>
            </li>
            {% endif %}
            {% endfor %}
            {% if items.has_next %}
            <li class="page-item">
                <a class="page-link" aria-label="Next"
                    href="?page={{items.next_page_number}}{% if request.GET.city %}&city={{ request.GET.city }}{% endif %}">Next</a>
            </li>
            {% else %}
            <li class="page-item disabled"><a class="page-link">Next</a></li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

score 0 · Answer 1 · answered Sep 07 '19 at 12:33

brtt3000 from r/djangolearning helped me over redit.

This was his answer: You're looping over the wrong context variable, change it to items.

{% for result in results %} I suspected this as soon as I saw you had both items and results in the context :)

For anyone whos gets here, remember to pass in the paginated variable.

How to paginate bootstrap cards with django

1 Answers1