django-pagination 样式修改

本文介绍如何在Django项目中使用Bootstrap样式调整分页组件的显示效果,通过修改默认的分页模板实现美观且易用的分页样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

默认django-pagination 样式:



使用bootstrap后样式:



(有些瑕疵,下面来完善一下)

修改后:



效果还不错吧。那么讲下如何修改。


首先找到其源码: (路径: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 %}


修改为:

{% 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 %}
就这么简单,刷新页面就可以看到效果啦。


注意: 我这里是直接修改了源文件,在实际项目中,建议大家讲模板拷贝到自己的项目中再进行修改! 项目中路径为 {{ yourtemplates}}/pagination/pagination.html



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值