django-pagination 样式修改
默认 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
转:http://blog.csdn.net/feng88724/article/details/7625880
django-pagination 样式修改的更多相关文章
- 通过 Django Pagination 实现简单分页
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面, ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- ExtJS控件样式修改及美化
Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”.对界面的美化而言,也是根本性的改变.普通的网页美工面对extjs项目根本无法下手,需要脚本 ...
- 帝国cms 列表页分页样式修改美化【2】
上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- H5 音频标签自定义样式修改以及添加播放控制事件
说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...
- HTML5中 audio标签的样式修改
由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...
- Excel图表编辑---表格移动,样式修改
一.移动位置和调整大小 先鼠标选中如下面这个图片,之后点击上方的设计按钮,随后选择右边的, 再选择,就可以实现图片的表格之间的移动. 其中移动图表里面的,选中这个之后,图表的大小会根据窗口的大小自动调 ...
- 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等
一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...
- progress进度条的样式修改
由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...
随机推荐
- JDBC---Mysql(1)
使用MySQL需要导mysql-connector-java-5.1.7-bin.jar包 所有的java.sql.Driver实现类,都提供了static块,块内的代码就是把自己注册到DriverM ...
- pip list 和 pip freeze
https://blog.csdn.net/vitaminc4/article/details/76576956 Pip’s documentation statespip descripti ...
- 抽屉之Tornado实战(5)--点赞与评论树
点赞 点赞的过程:数字增加,并在后台点赞表记录数据 需要发过去的数据:用户id,新闻id 用户id从session里获得,那新闻id怎么获取呢?这想到分页是循环新闻列表来展示内容,循环的新闻id可以做 ...
- ps命令参数
1.查看父进程ps -ef |grep <进程名>在显示的输出中,第三列就是该进程的父进程PID,然后可以再使用ps命令来查看父进程的名称ps -ef |grep <父进程PID&g ...
- for in 循环
for in循环可以循环遍历数组 关键也可以循环遍历对象!而一般的for循环只能循环遍历数组, 当循环遍历对象时key值代表键值对的键,obj[key]则是对应键的值: 当循环遍历数组时,数组不是 ...
- NMAP执行脚本smb-check-vulns.nse出错
错误信息:NSE: failed to initialize the script engine: /usr/bin/../share/nmap/nse_main.lua:801: ‘smb-chec ...
- Apache Spark支持三种分布式部署方式 standalone、spark on mesos和 spark on YARN区别
链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/ Spark On ...
- 学习UDP
参考博客:https://www.cnblogs.com/skyfsm/p/6287787.html 简单编写了 udp的小程序,udp_client 端通过终端输入字符,然后发送给udp_serve ...
- Nginx与安全体系架构
- 常用的shell脚本(安全方向)
更多shell脚本参考:https://blog.51cto.com/zero01/2046242 1.拒绝密码撞库攻击的ip shell脚本:实现对登录主机失败10次以上的ip进行拒绝登录 #! / ...