Skip to content

Instantly share code, notes, and snippets.

@isDipesh
Created April 13, 2017 09:49
Show Gist options
  • Save isDipesh/44e46e2a346d0f50f41eec11eff78b79 to your computer and use it in GitHub Desktop.
Save isDipesh/44e46e2a346d0f50f41eec11eff78b79 to your computer and use it in GitHub Desktop.
Bootstrap 4 pagination template (partial) for dj-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={{ page_obj.previous_page_number }}" aria-label="Previous" 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 pages %}
{% if page %}
{% if page == page_obj.number %}
<li class="page-item active">
<span class="page-link">{{ page }}</span>
</li>
{% else %}
<li class="page-item">
<a href="?page{{ page_suffix }}={{ page }}{{ getvars }}{{ hashtag }}" class="page-link">{{ page }}</a>
</li>
{% endif %}
{% 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={{ page_obj.next_page_number }}" aria-label="Next" class="page-link next">
›› {% trans "Next" %}
</a>
</li>
{% else %}
<li class="page-item disabled">
<span aria-label="next" class="page-link next">›› {% trans "Next" %}</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment