Django-pagination style Modification

Default Django-pagination style:

After using Bootstrap style:

(If there are some flaws, we will improve it below)

After modification:

The effect is good. Let's talk about how to modify it.

First find its source code: (Path: site-packages \ django_pagination-1.0.7-py2.7.egg \ pagination \ Templates \ pagination \ pagination.html)

{% if is_paginated %}{% load i18n %}<div class="pagination">    {% if page_obj.has_previous %}        <a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" class="prev">‹‹ {% trans "previous" %}</a>    {% else %}        <span class="disabled prev">‹‹ {% trans "previous" %}</span>    {% endif %}    {% for page in pages %}        {% if page %}            {% ifequal page page_obj.number %}                <span class="current page">{{ page }}</span>            {% else %}                <a href="?page={{ page }}{{ getvars }}{{ hashtag }}" class="page">{{ page }}</a>            {% endifequal %}        {% else %}            ...        {% endif %}    {% endfor %}    {% if page_obj.has_next %}        <a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" class="next">{% trans "next" %} ››</a>    {% else %}        <span class="disabled next">{% trans "next" %} ››</span>    {% endif %}</div>{% endif %}

To:

{% 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">‹‹ {% trans "previous" %}</a></li>    {% else %}        <li class="disabled"><a href="#">‹‹ {% trans "previous" %}</a></li>    {% endif %}    {% for page in pages %}        {% if page %}            {% ifequal page page_obj.number %}                <li class="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" %} ››</a></li>    {% else %}        <li class="disabled"><a href="#">{% trans "next" %} ››</a></li>    {% endif %}</ul></div>{% endif %}

In this simple way, you can see the effect by refreshing the page.

Note: I have directly modified the source file here. In actual projects, we suggest you copy the template to your own project and then modify it! Project path: {yourtemplates }}/ pagination/pagination.html