博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Django学习] Django基础(5)_优化分页器
阅读量:5892 次
发布时间:2019-06-19

本文共 1922 字,大约阅读时间需要 6 分钟。

一. 基本样式

主要优化内容:

#1. 当前页高亮#2. 显示当前页及其前后两页#3. 显示省略号标记#4. 显示首尾页#5. 将“页数描述文字”放置在“页码栏”下方#6. “页码栏”与“页数描述文字”居中显示  

二. 当前页高亮

  在模版中判断显示的页码是否是当前的页码,若是,添加class='active'属性

{% for page_num in page_of_blogs.num_pages%}   {% if page_num == page_of_blogs.number %}     
  • {
    { page_num }}
  •   {% else %}     
  • {
    { page_num }}
  •   {% endif %} {% endfor %}

    三. 显示当前页及其前后两页

    前两页 前一页 当前页 后一页 后两页
    current_page-2 current_page-1 current_page current_page+1 current_page+2

      current_page-2 最小值为1,current_page+2最大值为分页器的最大页数

    # 获取当前页码current_page_num = page_of_blogs.number# 设置前后可显示页码范围page_range = list(range(max(current_page_num-2,1), current_page_num)) + \          list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
    # 修改循环显示的页码范围{% for page_num in page_range %}   {% if page_num == page_of_blogs.number %}     
  • {
    { page_num }}
  •   {% else %}     
  • {
    { page_num }}
  •   {% endif %} {% endfor %}

    四. 显示省略号标记

    # 添加省略号标记if (page_range[0] - 1 >= 2):    page_range.insert(0,'...')if (paginator.num_pages - page_range[-1] >= 2):    page_range.append('...')
    {% for page_num in page_range %}    {% if page_num == page_of_blogs.number %}        
  • {
    { page_num }}
  • {% else %} # 取消当前页为'...'的链接功能 {% if page_num == '...' %}
  • {
    { page_num }}
  • {% else %}
  • {
    { page_num }}
  • {% endif %} {% endif %}{% endfor %}

    五. 显示首尾页

      将首页和尾页加入到page_range中

    # 先加入'...'标记    # 再将第一页与最后一页始终显示if (page_range[0] != 1):    page_range.insert(0,1)if (page_range[-1] != paginator.num_pages):    page_range.append(paginator.num_pages)

    六. 将“页数描述”放置在“页码栏”下方,并居中显示

    共有{

    { page_of_blogs.paginator.count}}篇博客, 当前为第{
    {page_of_blogs.number}}页, 共{
    {page_of_blogs.paginator.num_pages}}页

    div.paginator {	text-align: center;}

     


    注明:学习资料来自以及 

    转载于:https://www.cnblogs.com/AngryZe/p/9259701.html

    你可能感兴趣的文章
    [Flink原理介绍第四篇】:Flink的Checkpoint和Savepoint介绍
    查看>>
    mybatis学习之一 开发环境配置和接口编程
    查看>>
    Android Xutils 框架
    查看>>
    C#基础知识整理 基础知识(21) 委托(二)
    查看>>
    Android应用程序键盘(Keyboard)消息处理机制分析(16)
    查看>>
    Sysbench 0.5版安装配置
    查看>>
    统一沟通-技巧-11-Lync-联盟-无法-音频-远程桌面-传文件
    查看>>
    书摘—你不可不知的心理策略
    查看>>
    【博客话题】毕业——开始人生的艰苦历程
    查看>>
    2014.7.30-8.3日广大网友的提问解答(答问题的第2个工作周)
    查看>>
    Powershell管理系列(二十五)PowerShell操作之获取AD账号及邮箱信息
    查看>>
    Linux安装telnet
    查看>>
    【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物...
    查看>>
    openstack nova修改实例路径,虚拟磁盘路径
    查看>>
    java.sql.SQLException: Lock wait timeout exceeded --转
    查看>>
    使用C#进行图像处理的几种方法(转)
    查看>>
    Ajax原理学习
    查看>>
    sap scriptfom 多语言翻译
    查看>>
    实现超级简单的bug管理系统
    查看>>
    [LeetCode] Find Anagram Mappings 寻找异构映射
    查看>>