Skip to content

Instantly share code, notes, and snippets.

@m5wdev
Created May 29, 2019 09:47
Show Gist options
  • Save m5wdev/9665acc3c922448459d3a6337eaac933 to your computer and use it in GitHub Desktop.
Save m5wdev/9665acc3c922448459d3a6337eaac933 to your computer and use it in GitHub Desktop.
Django Pagination with ellipsis
<!--
README:
Simply change:
1. YOUR_OBJECT_NAME to your object model name
2. ?page= to your GET parameter
3. Add any layout you need (Bootstrap etc.)
-->
<ul>
{% if YOUR_OBJECT_NAME.has_previous %}
<li>
<a href="?page={{ YOUR_OBJECT_NAME.previous_page_number }}">&lt;</a>
</li>
{% else %}
<li class="disabled">
<a href="#" tabindex="-1" aria-disabled="true">&lt;</a>
</li>
{% endif %}
{% if YOUR_OBJECT_NAME.number|add:'-4' > 1 %}
<li>
<a href="?page={{ YOUR_OBJECT_NAME.number|add:'-5' }}">&hellip;</a>
</li>
{% endif %}
{% for i in YOUR_OBJECT_NAME.paginator.page_range %}
{% if YOUR_OBJECT_NAME.number == i %}
<li class="active">
<a href="{{ request.path }}?page={{ i }}">{{ i }}</a>
</li>
{% elif i > YOUR_OBJECT_NAME.number|add:'-5' and i < YOUR_OBJECT_NAME.number|add:'5' %}
<li>
<a href="?page={{ i }}">{{ i }}</a>
</li>
{% endif %}
{% endfor %}
{% if YOUR_OBJECT_NAME.paginator.num_pages > YOUR_OBJECT_NAME.number|add:'4' %}
<li>
<a href="?page={{ YOUR_OBJECT_NAME.number|add:'5' }}">&hellip;</a>
</li>
{% endif %}
{% if YOUR_OBJECT_NAME.has_next %}
<li>
<a href="?page={{ YOUR_OBJECT_NAME.next_page_number }}">&gt;</a>
</li>
{% else %}
<li class="disabled">
<a href="#" tabindex="-1" aria-disabled="true">&gt;</a>
</li>
{% endif %}
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment