Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 4 Pagination template for django-pure-pagination
{% load i18n %}
{% if is_paginated %}
<nav aria-label="navigation" class="p-3">
<ul class="pagination">
{% if page_obj.has_previous %}
<li class="page-item">
<a href="?{{ page_obj.previous_page_number.querystring }}"
class="page-link previous">&lsaquo;&lsaquo; {% trans "Previous" %}</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link previous">&lsaquo;&lsaquo; {% trans "Previous" %}</span>
</li>
{% endif %}
{% for page in page_obj.pages %}
{% if page %}
{% ifequal page page_obj.number %}
<li class="page-item active">
<span class="page-link">{{ page }}</span>
</li>
{% else %}
<li class="page-item">
<a href="?{{ page.querystring }}" class="page-link">{{ page }}</a>
</li>
{% endifequal %}
{% else %}
<li class="page-item disabled"><span class="page-link">. . .</span></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a href="?{{ page_obj.next_page_number.querystring }}"
class="page-link previous">›› {% trans "Next" %}</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link next">›› {% trans "Next" %}</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
@webtweakers

This comment has been minimized.

Copy link

commented Jun 9, 2018

Good starting point, but somehow the references to Django's page and paginator objects is all fussed up.

Here's another version...

{% load i18n %}
{% if is_paginated %}
<nav aria-label="navigation" class="mt-2">
  <ul class="pagination">
    {% if page_obj.has_previous %}
      <li class="page-item">
        <a href="?page={{ page_obj.previous_page_number }}"
           class="page-link previous">&laquo; {% trans "Previous" %}</a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <span class="page-link previous">&laquo; {% trans "Previous" %}</span>
      </li>
    {% endif %}
    {% for i in paginator.page_range %}
      {% if i == page_obj.number %}
        <li class="page-item active">
          <span class="page-link">{{ i }}</span>
        </li>
      {% else %}
        <li class="page-item">
          <a href="?page={{ i }}" class="page-link">{{ i }}</a>
        </li>
      {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
      <li class="page-item">
        <a href="?page={{ page_obj.next_page_number }}"
           class="page-link next">{% trans "Next" %} &raquo;</a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <span class="page-link next">{% trans "Next" %} &raquo;</span>
      </li>
    {% endif %}
  </ul>
</nav>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.