默认 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

django-pagination 样式修改的更多相关文章

  1. 通过 Django Pagination 实现简单分页

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面, ...

  2. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. ExtJS控件样式修改及美化

    Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”.对界面的美化而言,也是根本性的改变.普通的网页美工面对extjs项目根本无法下手,需要脚本 ...

  4. 帝国cms 列表页分页样式修改美化【2】

    上一篇(帝国cms 列表页分页样式修改美化[1])中我们已经对分页说了一个大概,下面我们就自己动手弄一个分页把: 第一步:进入帝国cms后台,点击系统设置->系统参数设置->信息设置:里面 ...

  5. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  6. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

  7. HTML5中 audio标签的样式修改

    由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比 ...

  8. Excel图表编辑---表格移动,样式修改

    一.移动位置和调整大小 先鼠标选中如下面这个图片,之后点击上方的设计按钮,随后选择右边的, 再选择,就可以实现图片的表格之间的移动. 其中移动图表里面的,选中这个之后,图表的大小会根据窗口的大小自动调 ...

  9. 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

    一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...

  10. progress进度条的样式修改

    由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...

随机推荐

  1. Flink - CoGroup

    使用方式, dataStream.coGroup(otherStream) .where(0).equalTo(1) .window(TumblingEventTimeWindows.of(Time. ...

  2. python——二分查找算法

    从有序列表的候选区data[0:n]开始,通过对待查找的值与候选区中间值的比较,可以使候选区减少一半   二分查找: 在一段数字内,找到中间值,判断要找的值和中间值大小的比较. 如果中间值大一些,则在 ...

  3. LeetCode 784 Letter Case Permutation 解题报告

    题目要求 Given a string S, we can transform every letter individually to be lowercase or uppercase to cr ...

  4. onload和DOMContentLoaded

    执行时间 onload必须等到页面内包括图片的所有元素加载完毕后才能执行. DOMContentLoaded是DOM结构绘制完毕后就执行,不必等到加载完毕. 编写个数不同 onload不能同时编写多个 ...

  5. Pandas之Dateframe 实现Excel读取与写入

    目的:有时需对数据进行到出到Excel,直观的给别人参阅,或从Excel中读取数据进行操作和分析依赖库 pandas 可简单的读出和写入 1,根据Excel读取( 需安装xlrd库) import n ...

  6. Matlab 快捷键 命令

    1. 在命令窗口(Command Window)中: 1) [上.下键]――切换到之前.之后的命令,可以重复按多次来达到你想要的命令 2) clc――清除命令窗口显示的语句,此命令并不清空当前工作区的 ...

  7. linux进程间通信同步-共享内存

    参考:https://www.cnblogs.com/charlesblc/p/6142868.html 使用有名信号量,sem_open().sem_close().sem_post().sem_w ...

  8. python全栈开发day12

    列表 创建列表: 基本操作: 索引 切片 追加 删除 长度 切片 循环 包含 #######################列表list类中提供的方法######################## ...

  9. replace函数的使用(替换单个和全局)

    //单个 var aa="1-2-3"; aa=aa.replace(',',"."); console.log(aa); //全局替换 var aa=&quo ...

  10. 微信小程序可以转发给微信好友了

    微信小程序又放大招了:小程序页面可以放置转发按钮,分享更流畅.同时开放了微信运动步数.背景音乐播放等更多基础能力.小程序可以在自己的页面上放置转发按钮,用户点击后,即可将喜欢的内容分享给好友或群聊,体 ...