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">&laquo;</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" >&raquo;</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分页的写法,前端后端!的更多相关文章

  1. 原生的 django 分页

    原始的 django 分页 # 基本 写法 class Paginator(object): def __init__(self, object_list, per_page, orphans=0, ...

  2. django项目一 分页器(前端分页和后端分页区别)

    1. 客户信息展示 1. 母版和继承 {% extends 'layout'%} {% load static%} {% static '文件路径' %} block css js content 2 ...

  3. python基于django编写api+前端后端分离

    有用 https://segmentfault.com/a/1190000016049962#articleHeader2 python的前后端分离(一):django+原生js实现get请求 htt ...

  4. 13.Django基础之django分页

    一.Django的内置分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views ...

  5. Django框架(十四)—— Django分页组件

    目录 Django分页组件 一.分页器 二.分页器的使用 三.案例 1.模板层 2.视图层 Django分页组件 一.分页器 数据量大的话,可以分页获取,查看 例如:图书管理中,如果有成千上万本书,要 ...

  6. day 65 Django基础之django分页

      Django基础之django分页   一.Django的内置分页器(paginator) view from django.shortcuts import render,HttpRespons ...

  7. day 61 Django基础之django分页

      Django基础之django分页 一.Django的内置分页器(paginator) view   from django.shortcuts import render,HttpRespons ...

  8. Django之META与前后端交互

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

  9. Django重定向的写法、与直接渲染的区别

    Django重定向的写法.与直接渲染的区别 return redirect (“login”)     #重定向到login页面,状态码是302页面重定向和直接渲染新的页面的区别.重定向实际是指向了另 ...

随机推荐

  1. 【较复杂bfs】洪水-C++

    描述 魔法森林的地图是R行C列的矩形.能通行的空地表示为'.',C君倾倒洪水的地点标记为'*',无法通行的巨石阵标记为'X',海狸的巢穴标记为'D',而画家和三只小刺猬的初始位置标记为'S'. 每一分 ...

  2. JVM的内存区域

    Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域, 包含程序计数器.虚拟机栈.本地方法栈.Java堆.方法区(运行时常量池).直接内存等,不同的版本会有所差异 各区 ...

  3. 【转载】 JAVA三层架构,持久层,业务层,表现层的理解

    JAVA三层架构,持久层,业务层,表现层的理解 转载:http://blog.csdn.net/ljf_study/article/details/64443653 SSH: Struts(表示层)+ ...

  4. C语言入门2-程序设计的灵魂—算法及Raptor的应用

    一.     什么是算法(5个特性) 算法就是   解决问题的方法和步骤. 算法为解决一个具体问题而采取的确定的  有限的 执行步骤  ,仅指  计算机   能执行的算法. 算法是程序设计的灵魂和核心 ...

  5. C#7.2 新增功能

    连载目录    [已更新最新开发文章,点击查看详细] C# 7.2 又是一个单点版本,它增添了大量有用的功能. 此版本的一项主要功能是避免不必要的复制或分配,进而更有效地处理值类型. C# 7.2 使 ...

  6. Sublime Text 格式化代码

    1.添加快捷键 其实在sublime中已经自建了格式化按钮: Edit -> Line -> Reindent 只是sublime并没有给他赋予快捷键,所以只需加上快捷键即可 Prefer ...

  7. C#使用CLR/C++的DLL间接调用Native C++的DLL

    C#使用CLR/C++的DLL间接调用Native C++的DLL 开发环境:win 7  VS2010 简介:C#的exe使用CLR/C++间接调用Native C++的DLL. 第一步:创建一个C ...

  8. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  9. Java集合 HashSet的原理及常用方法

    目录 一. HashSet概述 二. HashSet构造 三. add方法 四. remove方法 五. 遍历 六. 合计合计 先看一下LinkedHashSet 在看一下TreeSet 七. 总结 ...

  10. RocketMQ中Producer的启动源码分析

    RocketMQ中通过DefaultMQProducer创建Producer DefaultMQProducer定义如下: public class DefaultMQProducer extends ...