django-pagination 样式修改

默认 django-pagination  样式：

使用bootstrap后样式：

（有些瑕疵，下面来完善一下）

修改后：

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

首先找到其源码： （路径：site-packages\django_pagination-1.0.7-py2.7.egg\pagination\templates\pagination\pagination.html）

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

修改为：

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

就这么简单，刷新页面就可以看到效果啦。

 

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

转：http://blog.csdn.net/feng88724/article/details/7625880