Login

Django-pagination with Bootstrap CSS

Author:
ronbeltran
Posted:
May 3, 2012
Language:
Python
Version:
1.4
Score:
4 (after 4 ratings)

A quick django-pagination template fix to make it work with Bootstrap CSS Library 2.0. Usage: Install django-pagination and save the snippet in templates/pagination/pagination.html then {% paginate %} will work fine. See Django-paginaation on Bootstrap CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% if is_paginated %}
{% load i18n %}
<div class="pagination">
    <ul>
    {% if page_obj.has_previous %}
        <li><a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" class="prev">&lsaquo;&lsaquo; {% trans "previous" %}</a></li>
    {% else %}
        <li class="disabled prev"><a href="#">&lsaquo;&lsaquo; {% trans "previous" %}</a></li>
    {% endif %}
    {% for page in pages %}
        {% if page %}
            {% ifequal page page_obj.number %}
                <li class="current page active"><a href="#">{{ page }}</a></li>
            {% else %}
                <li><a href="?page={{ page }}{{ getvars }}{{ hashtag }}" class="page">{{ page }}</a></li>
            {% endifequal %}
        {% else %}
            ...
        {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
        <li><a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" class="next">{% trans "next" %} &rsaquo;&rsaquo;</a></li>
    {% else %}
        <li class="disabled next"><a href="#">{% trans "next" %} &rsaquo;&rsaquo;</a></li>
    {% endif %}
    </ul>
</div>
{% endif %}

More like this

  1. Template tag - list punctuation for a list of items by shapiromatron 10 months, 2 weeks ago
  2. JSONRequestMiddleware adds a .json() method to your HttpRequests by cdcarter 10 months, 3 weeks ago
  3. Serializer factory with Django Rest Framework by julio 1 year, 5 months ago
  4. Image compression before saving the new model / work with JPG, PNG by Schleidens 1 year, 6 months ago
  5. Help text hyperlinks by sa2812 1 year, 7 months ago

Comments

Please login first before commenting.