◢Django 自写分页与使用

目录

1、设置分页样式,并展示到浏览器

 2、模拟页码

 3、生成分页

4、数据显示

 5、上一页下一页

6、数据库的数据分页

 7、封装分页

8、使用封装好的分页

建立好app后,设置路径path('in2/',views.in2),视图def in2(request): ,HTML: in2.html

1、设置分页样式,并展示到浏览器

def in2(request):
    return render(request,'in2.html')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            list-style: none;
            margin: 0;
        }
        span{

            display: inline-block;
            width: 40px;
            text-align: center;
            font-size: 20px;
            border: 1px solid;
            background-color: #2aabd2;
        }
        a{
            text-decoration: none;
            color: white;
        }
    </style>
</head>
<body>
    <span><a>1</a></span>
</body>
</html>

 2、模拟页码

def in2(request):
    # 假设有100条数据
    data_count = 100 #350
    #每页有8条数据
    page_size = 8
    #共有多少页
    page_count, count=divmod(data_count,page_size)
    if count:
        page_count+=1

    page_string = ''
    for i in range(page_count):
        page_string+=f"<span><a>{i}</a></span>"
        
    #page_string = mark_safe("".join(page_string))
    return render(request,'in2.html',{"page_string":page_string})

若是在html中直接导入page_string 那就是一个字符串,

需要将循环生成的page_string进行,【取消注释】

page_string = mark_safe("".join(page_string))

作用是:将字符串列表(`page_string`)中的元素连接起来,并将结果标记为安全的HTML内容。使用`join()`函数将字符串列表中的所有元素连接在一起,然后`mark_safe()`函数将连接起来的字符串标记为安全的,这样在显示HTML内容时,就不会对其中的标签和特殊字符进行转义处理。通常用于在模板中生成动态的HTML内容,以避免对HTML标签和特殊字符进行转义。

 3、生成分页

数据量增多后,页码就变多了,需要设置显示的分页,在当前页的基础上显示前5页后5页,多出的页码不显示

为每个a标签附带参数page,使用字符串拼接,用for循环标明每个a所附带的参数,

点击a标签,发送的是get请求,GET请求没有获得page时,默认为第一页,点击之后,url自动携带page参数,每次点击获取该a标签的携带page参数,用作当前页

def in2(request):
    #默认设置当前页为1,若有get请求传递过来的当前页,则进行更改
    
    if request.GET.get('page'):
        current_page = int(request.GET.get('page'))
    else:
        current_page = 1

    data_count = 350    
    page_size = 8   
    page_count, count=divmod(data_count,page_size)  
    if count:
        page_count+=1


    #设置当前页的前后可见页数为5
    plus = 5
    #当前页小于等于5 起始页始终为1 ;当前页大于5 起始页为当前页减5
    if current_page <= plus + 1:
        start_page = 1
    else:
        start_page = current_page - plus
    # 当前页大于等于最终点页 结束页始终为终点页 ;当前页小于终点页减5 结束页为当前页+5
    if current_page >= page_count - plus:
        end_page = page_count
    else:
        end_page = current_page + plus


    page_string = ''
    for i in range(start_page, end_page + 1):
        page_string += f"<span><a href=?page={i}>{i}</a></span>"

    page_string = mark_safe("".join(page_string))
    context={
        "current_page":current_page,
        "start_page":start_page,
        "end_page" :end_page,
        "page_string":page_string,
    }
    return render(request,'in2.html',context)

成功后,为了显示当前页的不同,需要在for循环那里,增加一个if,用以判断,i与当前页是否相同,相同则为该页加上不同的样式

for i in range(start_page, end_page + 1):
    if i == current_page:
        page_string += f"<span style='background-color:#fff;'><a style='color:#000' href=?page={i}>{i}</a></span>"
    else:
        page_string += f"<span><a href=?page={i}>{i}</a></span>"

4、数据显示

增加数据的时候,注意最后一页数据是不满的[44*8=352],一共有350条数据,所以最后一页的end为总数据条数。

#获取数据的起始位置与结束位置[1,8],[9,16]
start = int(current_page - 1 ) * page_size + 1
if current_page == page_count:#当前页是最后一页时,数据并不是8条数据
        end = data_count
else:
        end = int(current_page) * page_size
print(start,end)

给context字典中补充起始数据,与结束数据,这里采用的是整型数字用来模拟数据总数,在HTML中for不能同平时使用,不能迭代整型数据,直接传入range(start,end,step)作为迭代器

context={

        "data":range(start,end+1),

}

 在HTML中遍历data

<style>
.data{
      width: 300px;
      height: 166px;
      border: 1px solid #8a6d3b;
      margin-bottom: 30px;
}
</style>

<body>
<div class="data">
    {% for i in data %}
        <li>这是第 {{ i }} 条数据</li>
    {% endfor %}
</div>
</body>

                            

 5、上一页下一页

在点击页码的情况下增加上一页下一页的按钮,当前看到的最后页码变为第一个页码。

看见第一页不显示上一页按钮,同样最后一页也不带按钮。

处于看不见首页,但又不超过加减页时,点击上一页会跳出合适的页码,应当设置page=1,拉回跳转位置,放置page变为负数,尾页也一样。

页码满足加减页时,实行最后一个页码变第一个页码,在当前页的页码基础上 加上 或 减去 plus的2倍

# 上一页,下一页
 if current_page <= plus +1:#当前页在前5页时,不需要上一页
     pre = ''
 else:
     if current_page <= plus * 2 :#当前页处于5-10页时,点击上一页,跳转到第1页
         pre=f'<span class="updown"><a href=?page={1}>首页</a></span>'
     else:
         pre = f'<span class="updown"><a href=?page={current_page - plus * 2}>上一页</a></span>'
 if current_page >= page_count - plus:
     next = ''
 else:
     if current_page >= page_count - plus * 2:
         next = f'<span class="updown"><a href=?page={page_count}>尾页</a></span>'
     else:
         next = f'<span class="updown"><a href=?page={current_page + plus * 2}>下一页</a></span>'

整合分页和上下页的程序,减少if的判断

6、数据库的数据分页

605/8=75,605%8=5【最后一页是75,有5条数据】第一列是表的id不是序号,中间有删掉的id,所以最终值不为605

data_count =  models.表名.objects.all().count()

<div class="data">
    {% for i in data %}
        <li><span>{{ i.id }}</span> <span style="width: 130px">{{ i.phone }}</span> <span>{{ i.price }}</span></li>
    {% endfor %}
</div>

 

在 SQL Server 中,索引是从 1 开始计数的,需要 +1,而MySql数据库的索引是从0开始,所以不用加,注意区别自己使用的数据起始索引  

 7、封装分页

建立软件包,命名为utils

 在utils中建立SplitPage.py,整合前面程序,该封装的封装,该方法体的方法体,page_size不写默认为8,写则加载

from django.utils.safestring import mark_safe
class Splitpagenumber:
    def __init__(self,request, queryset, page_size=8, plus=5, ):
        #定义变量,方法体实现分页
        if request.GET.get('page'):
            self.current_page = int(request.GET.get('page'))
        else:
            self.current_page = 1
        #数据库,
        self.queryset = queryset
        self.data_count = queryset.count()#数据总条数

        self.page_size = page_size
        '''可分为多少个页码'''
        self.page_count,self.count = divmod(self.data_count, page_size)
        if self.count:
            self.page_count += 1

        start = int(self.current_page - 1) * page_size
        if self.current_page == self.page_count:  # 当前页是最后一页时,数据并不是8条数据
            end = self.data_count
        else:
            end = int(self.current_page) * page_size

        self.data = self.queryset[start:end]
        self.plus =plus



    def html(self):

        # 获取数据的起始位置与结束位置[0,8],[
        start = int(self.current_page - 1) * self.page_size
        if self.current_page == self.page_count:  # 当前页是最后一页时,数据并不是8条数据
            end = self.data_count
        else:
            end = int(self.current_page) * self.page_size
        print(start, end)
        data = self.queryset[start:end]
        #实现 起始页,结束页 ,与 上一页下一页
        if self.current_page <= self.plus + 1:
            start_page = 1
            pre = ''
        else:
            start_page = self.current_page - self.plus
            if self.current_page <= self.plus * 2:  # 当前页处于5-10页时,点击上一页,跳转到第1页
                pre = f'<span class="updown"><a href=?page={1}>首页</a></span>'
            else:
                pre = f'<span class="updown"><a href=?page={self.current_page - self.plus * 2}>上一页</a></span>'
        # 当前页大于等于最终点页 结束页始终为终点页 ;当前页小于终点页减5 结束页为当前页+5
        if self.current_page >= self.page_count - self.plus:
            end_page = self.page_count
            next = ''
        else:
            end_page = self.current_page + self.plus
            if self.current_page >= self.page_count - self.plus * 2:
                next = f'<span class="updown"><a href=?page={self.page_count}>尾页</a></span>'
            else:
                next = f'<span class="updown"><a href=?page={self.current_page + self.plus * 2}>下一页</a></span>'
        """ 生成html格式 """
        page_string = ''
        page_string += pre

        for i in range(start_page, end_page + 1):
            if i == self.current_page:
                page_string += f"<span style='background-color:#fff;'><a style='color:#000' href=?page={i}>{i}</a></span>"
            else:
                page_string += f"<span><a href=?page={i}>{i}</a></span>"

        page_string += next
        page_string = mark_safe("".join(page_string))

        return page_string

8、使用封装好的分页 

完善in3的路径联系,然后运行in3

from app02.utils import SplitPage
def in3(request):
    queryset = models.User.objects.all()
    page_object = SplitPage.Splitpagenumber(request, queryset)
    context={
        "info":page_object.data,
        "page_string":page_object.html()
    }
    return render(request,'in3.html',context)

默认分页 【数据显示添加css】

page_object = SplitPage.Splitpagenumber(request, queryset,page_size=31,plus=5)
page_object = SplitPage.Splitpagenumber(request, queryset,page_size=2,plus=10)

只截了最后一页,分页显示的就不一样,但数据相同 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/140639.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C++】类和对象(2)--构造函数

目录 一 概念 二 构造函数特性 三 默认构造函数 一 概念 对于以下Date类&#xff1a; class Date { public:void Init(int year, int month, int day){_year year;_month month;_day day;}void Print(){cout << _year << "-" << _month <…

CCLink转Modbus TCP网关_MODBUS网口设置

兴达易控CCLink转Modbus TCP网关是一种用于连接CCLink网络和Modbus TCP网络的设备。它提供了简单易用的MODBUS网口设置&#xff0c;可以帮助用户轻松地配置和管理网络连接 1 、网关做为MODBUS主站 &#xff08;1&#xff09;将电脑用网线连接至网关的P3网口上。 &#xff08;…

stm32 WIFI模块_8266使用

使用以上配置可以正常回应&#xff0c;其中无论勾选或者不勾选DTR/RTS都可以得到正常回应 ATCWMODE?表示查询当前WiFi状态是处于热点模式&#xff08;AP模式&#xff09;或者是连接其他WiFi的那个模式。通过图片看出这个符号不能省略。 设置AP热点命令格式&#xff1a;ATCWSAP…

力扣刷题-二叉树-二叉树的层序遍历(相关题目总结)

思路 层序遍历一个二叉树。就是从左到右一层一层的去遍历二叉树。这种遍历的方式和我们之前讲过的都不太一样。 需要借用一个辅助数据结构即队列来实现&#xff0c;队列先进先出&#xff0c;符合一层一层遍历的逻辑&#xff0c;而用栈先进后出适合模拟深度优先遍历也就是递归的…

超级干货:光纤知识总结最全的文章

你们好&#xff0c;我的网工朋友。 光纤已经是远距离有线信号传输的主要手段&#xff0c;而安装、维护光纤也是很多人网络布线的基本功。 在网络布线中&#xff0c;通常室外楼宇间幢与幢之间使用的是光缆&#xff0c;室内楼宇内部大都使用的是以太网双绞线&#xff0c;也有使用…

【Git】第二篇:基本操作(创建本地仓库)

我们知道&#xff0c;git是一个版本控制器&#xff0c;可以帮我们控制管理电脑上所有格式的文档。 而我们需要使用git管理文件的时候&#xff0c;我们必须将这些文件放到git仓库中&#xff0c;只有在git仓库中的文件才可以被我们的git追踪管理 创建本地仓库 创建本地仓库是需…

Apache Airflow (五) :DAG调度触发时间

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…

教育局档案室智慧档案库房建设方案

教育局档案室智慧档案库房建设是指教育局为了更好地保存和管理学校、教师、学生等相关档案资料&#xff0c;以及保证这些档案资料的安全性、可靠性和完整性&#xff0c;而建设的一个专门的存储、管理和保护档案资料的场所。 专久智能提供的教育局档案库房建设方案从以下几个方面…

基于蝴蝶算法优化概率神经网络PNN的分类预测 - 附代码

基于蝴蝶算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于蝴蝶算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于蝴蝶优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

PCL安装与使用

1 apt安装 ubuntu20.04及以上版本下可以直接通过apt方式安装pcl编译好的二进制文件,二进制安装的版本为1.10。 sudo apt update sudo apt install libpcl-dev 2 源码安装 在pcl的github上下载对应的版本进行安装&#xff1a; https://github.com/PointCloudLibrary/pcl/rel…

分组取每组数据的最大值和最小值的方法思路,为类似场景的数据分析提取提供思路,例如提取宗地内建筑的最高层数等可参考此方法思路

目录 一、实现效果 二、实现过程 1.读取并剔除无效数据 2.数据分组 3.提取最大值 4.提取最小值 三、总结 使用FME实现批量分组取每组数据的最大值和最小值&#xff0c;为类似场景的数据分析提取提供思路&#xff0c;例如提取宗地内建筑的最高层数等可参考此方法思路。关…

酉矩阵(Unitary Matrix)

对于n阶复数矩阵A&#xff0c;如果&#xff0c;其中表示矩阵A的共轭转置&#xff0c;为单位矩阵&#xff0c;那么就称A为酉矩阵。 对于酉矩阵&#xff0c; 如果酉矩阵的元素都是实数&#xff0c;那么该矩阵就是正交矩阵。

74hc165 编程注意事项

74hc165 是一个并行输入转串行输出的io 扩展芯片&#xff0c;支持级联。 74HC165 的工作原理基于移位寄存器的设计。它通过四个输入引脚( SER, SRCLK, RCLK, OE)来实现数据的串行输入、并行输出。在时钟信号的驱动下&#xff0c;数据逐位地从串行输入引脚SER进入寄存器。每次时…

计算复杂性理论(一)图灵机

计算复杂性理论&#xff08;一&#xff09;图灵机 一台 k-带图灵机&#xff08;TM&#xff09;M 有 k-条带子。第一条带子称为输入带&#xff0c;用来存放输入数据&#xff0c;输入带是只读带。其余 k−1 条带子是工作带&#xff0c;既可以从工作带上读信息&#xff0c;也可以…

Hafnium之工程目录结构介绍

安全之安全(security)博客目录导读 Hafnium存储库包含Hafnium源代码以及与集成测试和单元测试相关的测试代码。为了帮助集成测试,存储库还包含一个用于分区的小型客户端库,以及构建和运行测试所需的预构建工具二进制文件。构建系统由gn支持。 每个平台都有一个单独的…

如何学习VBA:3.2.7 工作簿的操作引申

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的劳动效率&#xff0c;而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册&#xff0c;现在已经全部完成&#xff0c;希望大家利用、学习。 如果…

【PIE-Engine 数据资源】全球250米LAI产品

文章目录 一、 简介二、描述三、波段四、示例代码参考资料 一、 简介 数据名称全球250米LAI产品时间范围2015年空间范围全球数据来源北京师范大学肖志强教授团队代码片段var images pie.ImageCollection(“BNU/LAI/GLOBAL-250”) 二、描述 全球 250 米叶面指数产品由北京师范…

mNetAssist网络调试助手编译

1.现在的问题 很多都是用百度网盘下载&#xff0c;访问github才能下载源码。 2.码云下载地址 这个已经是7年前编辑的了&#xff0c;是从github上复制到码云的。 cheni/mNetAssist 3.下载后用QT编译 图示中的两行要注释掉&#xff0c;用//&#xff0c;作者也有备注QT4.8要用…

Linux网络——自定义协议

目录 一.什么是协议 二.协议与报文 三.自定义协议 1.封装套接字 2.构建请求与响应 3.序列化和反序列化 4.报头添加和去除 5.报文读取 四.服务器端程序 五.客户端程序 一.什么是协议 协议在生活中泛指&#xff1a;双方或多方为了完成某项任务或达成某种目的而制定的共…