django-pagination 样式修改

默认 django-pagination 样式：

使用bootstrap后样式：

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

修改后：

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

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

[html] view plaincopyprint?

{% 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 %}

修改为：

[html] view plaincopyprint?

{% 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

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

转载于:https://www.cnblogs.com/smallcoderhujin/p/3142477.html

django-pagination 样式修改相关推荐

combobox 怎么实现对listview的类别查询_通过 Django Pagination 实现简单分页
作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面,影 ...
android edittext光标太大,Android中EditText样式修改聚焦光标、背景
在Android开发中,根据项目的需求,需要定制一些特殊的样式,例如:使用EditText时,聚焦时的背景及光标图片使用自定义而非android系统默认的.这两天,在项目中涉及此需求,现记录如下: 首 ...
html input type=quot;filequot;,科技常识：关于type=quot;filequot;的input框样式修改小结...
今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...
Word中新建样式/修改样式对话框中的各个选项意义
名称(N): 显示您在"样式"对话框中选择的样式的名称.您可以更改此样式,或者键入新名称来新建样式,长文档中,样式的名称要注意易于理解和记忆,如"篇样式",&q ...
滚动条全局样式修改与局部修改
全局的样式代码: ::-webkit-scrollbar {width: 10px;height: 10px;}/* 滚动条的滑块 */::-webkit-scrollbar-thumb {backg ...
全局样式_CAD新手福利：不懂标注样式修改的请进来一看
在CAD中,尺寸标注是必不可少的. 因此关于尺寸标注的样式修改,也相对来说比较"杂",因为有些时候,尺寸线和尺寸界限都会有一定的要求. 今天,分享一些尺寸标注中关于尺寸线和尺寸界限 ...
html input选择框样式修改,关于type=file的input框样式修改小结
关于type="file"的input是啥? 这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传,反正比以前好玩多了. 上传按钮 ...
layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
Input placeholder属性样式修改(颜色,大小,位置)
Input placeholder属性样式修改(颜色,大小,位置) input::-webkit-input-placeholder {/* placeholder颜色 */color: #aab2b ...
iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结数据渲染相关正常渲染直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...

django-pagination 样式修改

django-pagination 样式修改相关推荐

最新文章

热门文章