专栏首页木子昭的博客Django快速分页在后端(视图函数中)在前端(html模板中)

Django快速分页在后端(视图函数中)在前端(html模板中)

分页

在web开发中,对大量的商品进行分页显示,是常见的需求,django对分页直接提供了现成的函数,让我们的开发更为快速便捷...

动图_Django快速分页

在后端(视图函数中)

from django.shortcuts import render
from .models import ShowMyComputer
# 引入方法
from django.core.paginator import Paginator
# Create your views here.

def show(request, page_id):

    # 获取需要分页的对象集合
    all_goods = ShowMyComputer.objects.all()

    # 创建分页对象
    paginator = Paginator(all_goods, 3)

    # 根据当前页码,确定返回的数据
    current_page = paginator.page(page_id)

    # 保证前端取到的"页数"为整型
    page_id = int(page_id)


    return render(request, 'computer/list.html', locals())

在前端(html模板中)

<body>
    {# 展示当前页面的数据 #}
    {% for goods in current_page %}
    <div class="my_goods">

        <div class="goods_image">       
            ![图片占位](/static/{{ goods.goods_image }})
        </div>
        
        <br>
        
        <div class="goods_name">{{ goods.goods_name }}</div>

    </div>

    {% endfor %}


    <div class="page_num">

    {# 判断'上一页'是否存在,如果存在则保留`上一页`标签 ,反之则不显示`上一页`标签 #}
    {% if current_page.has_previous %}

        <a href="{% url 'computer:show' current_page.previous_page_number %}">上一页</a>

    {% endif %}


    {# 确定分页数量 #}

    {% for index in paginator.page_range %}

        {# 如果页码与当前页面相符,则添加红色背景 #}
    {% if page_id == index %}
        <a href= "{% url 'computer:show' index %}" style="background-color: red" >{{ index }}</a>
        {# 如果页面与当前页面不符,则正常显示 #}
    {% else %}
        <a href="{% url 'computer:show' index %}" >{{ index }}</a>
    {% endif %}

    {% endfor %}

    {# 判断'下一页'是否存在,如果存在则保留`下一页`标签 ,反之则不显示`下一页`标签 #}
    {% if current_page.has_next%}

        <a href="{% url 'computer:show' current_page.next_page_number %}">下一页</a>

    {% endif %}


    </div>

</body>

文章涉及到的资源我会通过百度网盘分享,为便于管理,资源整合到一张独立的帖子,链接如下: http://www.jianshu.com/p/4f28e1ae08b1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于iPad的100个问题

    大屏iPad可以作为MacBook的扩展屏幕,打开MacOS随航,连接iPad,MacBook就有了两个屏幕~

    zhaoolee
  • 《讲个故事》七个小矮人 与 七层模型科学的OSI 与 简洁的TCP/IP对比

    某天深夜,标准委员会的工程师们的在酒吧里喝酒划拳,酒过三巡,越玩越嗨,谈到迪士尼电影的时候,他们把电影里7个小矮人的名字写在餐巾纸上,有个人开玩笑说 7 对于...

    zhaoolee
  • React组件内事件传参 实现tab切换

    zhaoolee
  • 浅析InnoDB文件结构

    innodb的物理文件包括系统表空间文件ibdata,用户表空间文件ibd,日志文件ib_logfile,临时表空间文件ibtmp,undo独立表空间等。

    腾讯数据库技术
  • 深度 | 解析InnoDB引擎

    一、综述 innodb的物理文件包括系统表空间文件ibdata,用户表空间文件ibd,日志文件ib_logfile,临时表空间文件ibtmp,undo独立表空...

    腾讯云数据库 TencentDB
  • SAP Spartacus Header区域的渲染逻辑

    文件:projects\storefrontlib\src\cms-structure\page\page-layout\page-layout.service...

    Jerry Wang
  • 文件系统和裸块设备的page cache问题

    文件系统读取文件一般会使用do_generic_file_read(),mapping指向普通文件的address space。如果一个文件的某...

    Linux阅码场
  • Django自定义列表 models字段显示方式

    我们可以在这基础上改进,添加其它字段,从而改变django后台admin 数据库列表字段的显示。 这个页面应该提供便利,比如说:在这个列表中可以看到编号,标题,...

    砸漏
  • js检测滚动条到底部

    仙士可
  • Python分布式微博爬虫(源码分享)

    项目地址:https://github.com/ResolveWang/weibospider 作者:resolvewang ? 关于本项目 实现内容包括用户信...

    小歪

扫码关注云+社区

领取腾讯云代金券