django分页的写法,前端后端!
django有一个自带的分页,虽然功能很全面,但是不适合我应用的场景,所以自己写了一个代码 拿走不谢!
发现了了bug 笔者正在修复 美化 修复好了在上传
应用的场景 :
1.最好是 django中使用
2. 分页索要的数据 你必须给全
3. 输出的是一个字典 和 一个分页的字符串类型代码
效果图:
使用的页码剧中飘红效果,就是后边的样式没有调好,我不专业,你自己调一下吧 
使用方法:
拿到下面的组件,放到一个文件夹里面
views.py要引入一下

因为我的page

满足条件了之后,前端页面这么写组件返回的数据是样的,是一个字典,que是querryswt类型,new_html是一个分页组件 所以前端这么写就行了

"""
启动调用的函数是 my_html()
需要的参数是
param que: 一个querryset类型的数据
new_num_page: 要跳转的的页码
href:拼接路径 """
def html(new_lis,new_num_page,page_num,href):
"""
:param new_lis:
:param new_num_page:
:param page_num:
:param href: 传入的拼接路径比如 /custorm/?page=
:return:
"""
page_html = ""
page_pre_html = f'<nav aria-label="Page navigation"><ul class="pagination "><li><a href="{href}1" aria-label="Previous"><span aria-hidden="true">首页</span></a></li><li><a href="{href}{new_num_page - 1}" aria-label="Previous"><span aria-hidden="true">«</span></a></li>'
page_html += page_pre_html
for i in new_lis:
if i == str(new_num_page):
page_html += f'<li ><a href="{href}{i}" style="color:red" >{i}</a></li>'
else:
page_html += f'<li ><a href="{href}{i}" >{i}</a></li>' pagenum_html = f'<li><a href="{href}{new_num_page + 1}" aria-label="Next"><span aria-hidden="true" >»</span></a></li><li><a href="{href}{page_num}" aria-label="pattern"><span aria-hidden="true">尾页</span></a></li><li><span aria-hidden="true" ><form action="" method="get" ><input type="text" style="width:80px;height:18px;" placeholder="共:{page_num}页" name="page" ><input type="submit" style="width:80px;height:18px;" value="跳转"></form></li></ul></nav>'
page_html += pagenum_html
return page_html #收入数据,做成字典传出去
def my_html(que,new_num_page,href,page_max_piece=10,page_tag_num=5):# param que: 一个querry类型的数据new_num_page: 新的页码 href:拼接路径
"""
:param que: 一个querry类型的数据
:param new_num_page: 新的页码
href:拼接路径
:param page_max_piece: 页面显示的最大条数
:param page_tag_num: 页面显示的页码数 最好是奇数 轻易别改
:return: 返回一个字典 携带切片好的querry 和 一个 网页的html 直接返回前段就可以用了
"""
all_data_count = que.count()
page_num, resid = divmod(all_data_count, page_max_piece) # 商数和余数
if resid:
page_num += 1 # 拿到了总页数
page_all_lis = [str(i) for i in range(1, page_num + 1)]
if new_num_page in page_all_lis:
new_num_page = int(new_num_page)
if new_num_page > 2 and new_num_page < page_num - 1:
ret = html(page_all_lis[new_num_page-3:new_num_page+2],new_num_page,page_num,href)
elif new_num_page <= page_tag_num:
ret = html(page_all_lis[ 0:page_tag_num], new_num_page, page_num,href)
elif new_num_page > page_num-2:
ret = html(page_all_lis[page_num-page_tag_num:page_num],new_num_page,page_num,href)
return {"que": que[(new_num_page - 1) * page_max_piece:new_num_page * page_max_piece], "new_html": ret}
else:
new_num_page=1
ret = html(page_all_lis[0:page_tag_num], new_num_page, page_num,href)
return {"que": que[(new_num_page - 1) * page_max_piece:new_num_page * page_max_piece], "new_html": ret}
V关于分页的组件
django分页的写法,前端后端!的更多相关文章
- 原生的 django 分页
原始的 django 分页 # 基本 写法 class Paginator(object): def __init__(self, object_list, per_page, orphans=0, ...
- django项目一 分页器(前端分页和后端分页区别)
1. 客户信息展示 1. 母版和继承 {% extends 'layout'%} {% load static%} {% static '文件路径' %} block css js content 2 ...
- python基于django编写api+前端后端分离
有用 https://segmentfault.com/a/1190000016049962#articleHeader2 python的前后端分离(一):django+原生js实现get请求 htt ...
- 13.Django基础之django分页
一.Django的内置分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views ...
- Django框架(十四)—— Django分页组件
目录 Django分页组件 一.分页器 二.分页器的使用 三.案例 1.模板层 2.视图层 Django分页组件 一.分页器 数据量大的话,可以分页获取,查看 例如:图书管理中,如果有成千上万本书,要 ...
- day 65 Django基础之django分页
Django基础之django分页 一.Django的内置分页器(paginator) view from django.shortcuts import render,HttpRespons ...
- day 61 Django基础之django分页
Django基础之django分页 一.Django的内置分页器(paginator) view from django.shortcuts import render,HttpRespons ...
- Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
- Django重定向的写法、与直接渲染的区别
Django重定向的写法.与直接渲染的区别 return redirect (“login”) #重定向到login页面,状态码是302页面重定向和直接渲染新的页面的区别.重定向实际是指向了另 ...
随机推荐
- 个人永久性免费-Excel催化剂功能第32波-空行空列批量插入和删除
批量操作永远是效率提升的王道,也是Excel用户们最喜欢能够实现的操作虽说有些批量操作不一定合适Excel的最佳实践操作,但万千世界,无奇不有,特别是在国人眼中领导最大的等级森严的职场环境下.Exce ...
- C# 针对特定的条件进行锁操作,不用lock,而是mutex
背景:用户领取优惠券,同一个用户需要加锁验证是否已经领取,不同用户则可以同时领取. 上代码示例: 1.创建Person类 /// <summary> /// Person类 /// < ...
- 百度OCR 文字识别 Android安全校验
百度OCR接口使用总结: 之前总结一下关于百度OCR文字识别接口的使用步骤(Android版本 不带包名配置 安全性弱).这边博客主要介绍,百度OCR文字识别接口,官方推荐使用方式,授权文件(安全模式 ...
- C#3.0新增功能09 LINQ 标准查询运算符 02 查询表达式语法
连载目录 [已更新最新开发文章,点击查看详细] 某些使用更频繁的标准查询运算符具有专用的 C# 语言关键字语法,使用这些语法可以在查询表达式中调用这些运算符. 查询表达式是比基于方法的等效项更具 ...
- 《VR入门系列教程》之7---DK2和Crescent Bay
The DK2 于2014年春,Oculus发布了第二代开发版头显设备,代号为DK2.与DK1相比,Oculus Rift DK2的外观有很大改进,并且轻了许多,体积仍然比较大,可以罩住大部分 ...
- windows和linux下如何对拍
对拍是各种计算机考试检查时必备工具,实际上十分强大,只要你的暴力没有写错就没有问题. 对拍的意思:(怎么有点语文课的意思雾) 对:看见'对'就可以知道有两个. 拍:就是把两个程序结果拍在一起,对照(有 ...
- 上传及下载github项目
1.上传本地项目 git init //把这个目录变成Git可以管理的仓库 git add README.md //文件添加到仓库 git add . //不但可以跟单 ...
- laravel 模型查询总结
1.Model::find($id);//查找主键为$id的数据 2.Model::find([$key1,$key2]);//使用双主键进行查找 3.Model::findOrFail($id);/ ...
- Samba:打造企业级授权文件共享服务器
写在前面的话 先来说说故事背景:公司内部文件服务器的解决方案其实很多,对于中小型互联网公司,大多的在这一块的选型还是 FTP,或者 VSFTP,但是个人实在是对那个东西喜欢不起来,于是就选择了配置相对 ...
- 从CNI到OVN
kubernetes各版本离线安装包 诸如calico flannel等CNI实现,通过牺牲一些功能让网络复杂度得以大幅度降低是我极其推崇的,在云原生时代应用不再关心基础设施的场景下是一个明智之举,给 ...