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. linux 安装weblogic12.1.3.0步骤

    此过程为jar包安装~ 需注意:fmw_12.1.3.0.0_wls.jar     需要jdk1.7.0_15以上的版本 1.安装JDK(若已装可跳过) (1)Oracle官网下载jdk linux ...

  2. OWASP 关于会话管理 - 译文 [原创]

    英文原文:https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/Session_Management_Cheat_Shee ...

  3. 《C# 语言学习笔记》——目录

    C# 简介 变量和表达式 流程控制 3.1 布尔逻辑 3.2 goto语句 3.3 分支 3.4 循环 变量的更多内容 4.1 类型转换 4.2 复杂的变量类型 4.3 字符串的处理 函数 5.1 定 ...

  4. Python_Day1_人人都爱列表

    列表由一系列按特定顺序排列的元素组成.你可以创建包含字母表中所有字母.数字0~9或 所有家庭成员姓名的列表;也可以将任何东西加入列表中,其中的元素之间可以没有任何关系. 鉴于列表通常包含多个元素,给列 ...

  5. Java简单公式计算器

    最近给公司开发业务代码时,碰到一个场景,简单描述是这样的: 客户要向咱们公司定制一件产品,这个产品呢,有很多属性,那公司得根据这些属性报价呀,怎么报价呢?公司针对某种类型的产品有一个基准价,在同类产品 ...

  6. WebGL中深度碰撞方法总结

    z-fighting问题是三维渲染中常见的问题,本文根据实际工作中遇到的一些场景,进行了系统的总结 一个实际工作中的问题 当两个面离得太近就会发生深度碰撞问题,比如: 遇到深度检测问题,最重要的是先搞 ...

  7. 牛客第十场Rikka with Prefix Sum

    由于其中的2操作非常多,我们就需要将其快速的更改,就会用到组合数的东西 其实自己手写一下就可以发现对于一个点增加的值在经过不断地前缀和累加过程中对于一点的贡献满足杨辉三角 所以我们就需要记录一下其中的 ...

  8. sqlmap续

    sqlmap续 注入语句(知道绝对路径时候可用) http://192.168.99.171/test2/sqli/example10.php?catid=3’union select 1,’< ...

  9. Cordova-iOS SDK封装

    源码编译与制作静态库 下载cordova-ios源码,下载地址为:cordova-ios 解压后使用Xcode进行编译,编译选定模拟器和Generic iOS Device,cmd+B,编译成功(Dy ...

  10. Codeforces Round #192 (Div. 2) (330A) A. Cakeminator

    题意: 如果某一行没有草莓,就可以吃掉这一行,某一列没有也可以吃点这一列,求最多会被吃掉多少块蛋糕. //cf 192 div2 #include <stdio.h> #include & ...