Skip to content

Instantly share code, notes, and snippets.

@xtranophilist
Last active January 17, 2019 10:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xtranophilist/3d471e61855d3e581e6e6635632d5ea6 to your computer and use it in GitHub Desktop.
Save xtranophilist/3d471e61855d3e581e6e6635632d5ea6 to your computer and use it in GitHub Desktop.
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
Copy link

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