Django 4.x 智能分页get_elided_page_range

Django智能分页

分页效果

  • 第1页的效果
    在这里插入图片描述
  • 第10页的效果
    在这里插入图片描述
  • 带输入框的效果

主要函数

# 参数解释
# number: 当前页码,默认:1
# on_each_side:当前页码前后显示几页,默认:3
# on_ends:首尾固定显示几页,默认:2
Paginator.get_elided_page_range(number, on_each_side=3, on_ends=2)

代码部分

  • 接口查询
# 获取列表信息
def events(request):event_list = Event.objects.all().order_by("-level", "-begin")# 分页部分的代码page_number = request.GET.get('page', 1)paginator = Paginator(event_list, 15)page_obj = paginator.get_page(page_number)page_range = paginator.get_elided_page_range(number=page_number, on_each_side=3, on_ends=2)return render(request, "events.html", {"page_obj": page_obj, "page_range": page_range})
  • 前端展示
...
{#分页代码,业务代码请自行补充即可#}
{% if page_obj.has_other_pages %}<nav><ul class="pagination justify-content-center">{% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a></li>{% else %}<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>{% endif %}{% for item in page_range %}{% if item == page_obj.number %}<li class="page-item active"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>{% elif item == '...' %}<li class="page-item"><a class="page-link" href="#">{{ item }}</a></li>{% else %}<li class="page-item"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>{% endif %}{% endfor %}{% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a></li>{% else %}<li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>{% endif %}</ul></nav>
{% endif %}

带输入框的效果部分代码

  • 接口查询时添加了总页数
def events(request):event_list = Event.objects.all().order_by("-level", "-begin")# 分页部分的代码page_number = request.GET.get('page', 1)paginator = Paginator(event_list, 15)page_obj = paginator.get_page(page_number)num_pages = paginator.num_pages  # 获取总共有多少页page_range = paginator.get_elided_page_range(number=page_number, on_each_side=3, on_ends=2)return render(request, "events.html", {"page_obj": page_obj, "page_range": page_range, "num_pages ":num_pages })
  • 前端部分添加了输入框
{% if page_obj.has_other_pages %}<nav><ul class="pagination justify-content-center">{% if page_obj.has_previous %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a></li>{% else %}<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>{% endif %}{% for item in page_range %}{% if item == page_obj.number %}<li class="page-item active"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>{% elif item == '...' %}<li class="page-item"><a class="page-link" href="#">{{ item }}</a></li>{% else %}<li class="page-item"><a class="page-link" href="?page={{ item }}">{{ item }}</a></li>{% endif %}{% endfor %}{% if page_obj.has_next %}<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a></li>{% else %}<li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>{% endif %}# 对input输入进行了限制[1, num_pages],防止越界输入# <li class="page-item">&nbsp;共{{ num_pages }}页<label for="p_num">&nbsp;到第</label><input type="text" oninput="if(value>{{ num_pages }})value={{ num_pages }};if(value<0)value=1" id="p_num">&nbsp;</li>#这里引入了一个button点击事件#<li class="page-item"><button class="page-link" id="submit">确定</button></li></ul></nav>
{% endif %}
  • 点击事件处理
 // 就是一个跳转,本想在这里处理输入页码检查的,觉得麻烦就改成input上的输入限制了。$("#submit").click(function () {let page_number = $("#p_num").val();window.location.href=`?page=${page_number}`  });

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html5基础知识——表单

表单由三个部分组成&#xff0c;分别是表单域、表单控件、提示信息&#xff08;也就是默认显示的内容&#xff09; 表单域 使用form标签定义 将所有的元素信息定义在一块区域中 用于将表单中的所有元素信息提交给服务器 其中&#xff1a;action表示该表单将要提交到哪个地址&am…

5. DNS 记录和报文

DNS 服务器中以资源记录的形式存储信息&#xff0c;每一个 DNS 响应报文一般包含多条资源记录。一条资源记录的具体的格式为 &#xff08;Name&#xff0c;Value&#xff0c;Type&#xff0c;TTL&#xff09; 其中 TTL 是资源记录的生存时间&#xff0c;它定义了资源记录能够…

LWIP+TCP客户端

一、TCP API函数 其中tcp_poll()函数的第三个参数表示隔几秒调用一次这个周期性函数 二、修改服务器的IP 三、TCP客户端编程思路 申请套接字绑定服务器IP和端口号等待客户端连接 进入连接回调函数在连接回调函数中 配置一些回调函数&#xff0c;如接收回调函数&#xff0c;周期…

ADC STM32

/// STM32ADC模拟/数字转换详解 FOC控制库MCSDK5.4.4梳理(2)——电流采样 ///

Numpy库介绍

NumPy&#xff08;Numerical Python的缩写&#xff09;是Python中用于科学计算的一个强大的库。它提供了高性能的多维数组对象&#xff08;即ndarray&#xff09;、用于处理这些数组的工具以及用于数学函数操作的函数。让我为你介绍一下它的一些主要功能&#xff1a; 1. 多维数…

牛客 | 字符金字塔

请打印输出一个字符金字塔&#xff0c;字符金字塔的特征请参考样例 #include <stdio.h> #include <string.h> using namespace std; int main() {char c;scanf("%c", &c);for (int i 1; i < (c - 64); i)//第一个循环决定了有多少行{//c:67 第三…

每日两题 / 138. 随机链表的复制 148. 排序链表(LeetCode热题100)

138. 随机链表的复制 - 力扣&#xff08;LeetCode&#xff09; 用哈希表记录原链表中的节点是否被复制过 遍历原链表并通过哈希表维护新链表 /* // Definition for a Node. class Node { public:int val;Node* next;Node* random;Node(int _val) {val _val;next NULL;rand…

苹果研发用于数据中心的AI芯片 以ACDC项目为核心

据《华尔街日报》报道&#xff0c;苹果公司(AAPL.O)一直在研发自己的芯片&#xff0c;用于在数据中心服务器上运行人工智能软件。这一举措可能为苹果在人工智能领域的竞争中提供关键优势。知情人士透露&#xff0c;这一服务器芯片项目的内部代号为ACDC&#xff08;Apple Chips …

Java | Leetcode Java题解之第74题搜索二维矩阵

题目&#xff1a; 题解&#xff1a; class Solution {public boolean searchMatrix(int[][] matrix, int target) {int m matrix.length, n matrix[0].length;int low 0, high m * n - 1;while (low < high) {int mid (high - low) / 2 low;int x matrix[mid / n][m…

CSS:border作用

border作用 解释方面举例 补充举例 总结 解释 在CSS&#xff08;层叠样式表&#xff09;中&#xff0c;border属性用于设置元素边框的样式、宽度和颜色。border是一个简写属性&#xff0c;它允许您在一次声明中设置以上所有属性。 方面 border-style&#xff1a;定义边框的样…

人工神经网络初步

大家好&#xff0c;这里是七七&#xff0c;由于各种比赛的缘故&#xff0c;使用了很多人工神经网络模型。但是很多的原理都不是很明白&#xff0c;就导致了不能灵活地运用┭┮﹏┭┮。为此&#xff0c;去看了些人工神经网络原理书&#xff0c;写下此专题。 在进入正文之前要先…

指针再学习笔记

概念 示例 类型 示例 作用 注意&#xff1a;有些内存地址可能系统不会允许任意访问 运算 示例 空指针

windows驱动开发-内核编程技术汇总(七)

多处理器环境出错 在基于 NT 的操作系统上&#xff0c;驱动程序是多线程的;它们可以同时接收来自不同线程的多个 I/O 请求。 在设计驱动程序时&#xff0c;必须假定它将在 SMP 系统上运行&#xff0c;并采取适当的措施来确保数据完整性。 具体而言&#xff0c;每当驱动程序更…

ue引擎游戏开发笔记(34)——建立射击映射,并添加特效

1.需求分析&#xff1a; 准备处理射击系统&#xff0c;首先角色需要能射击&#xff0c;有反馈&#xff0c;先建立角色与控制器之间的映射&#xff0c;并添加简单特效&#xff0c;证明映射已经建立。 2.操作实现&#xff1a; 1.首先常规建立映射流程&#xff0c;具体可参考笔记…

《挑战100个产品拆解:抖音》

抖音&#xff0c;作为当今社交媒体领域的明星产品&#xff0c;其背后的产品思维一直备受关注。在这篇文章中&#xff0c;我们将深入拆解抖音的产品思维&#xff0c;揭示其成功的秘密。 产品定位 1.产品是什么样的用户&#xff1a; 年轻人和青少年是抖音的主要用户群体。抖音…

Jenkins与Rancher的配合使用

Jenkins和Rancher是两个常用的DevOps工具&#xff0c;可以很好地配合使用来实现持续集成和持续部署。 Jenkins是一个开源的自动化构建工具&#xff0c;可以实现自动化的代码构建、测试和部署等一系列操作。可以通过Jenkins来触发构建任务&#xff0c;例如从代码仓库中拉取最新的…

【Qt】获取、设置环境变量

1、获取环境变量 1)qgetenv QByteArray qgetenv(const char *varName)返回名为 varName 环境变量的值,类型为 QByteArray。如果要获取 QString 可以使用 QString::fromLocal8Bit(); 如果在环境中找不到该变量,则返回默认构造的QByteArray。 注意: 在 Windows 上,如果原…

《1w实盘and大盘基金预测 day31》

昨日预测 3123-3150-3177 探底回升&#xff0c;震荡上涨&#xff0c;收小红小绿 双创指数后期上涨的幅度也是会大于上证的&#xff0c;四月底的时候就提醒建仓。 关注板块&#xff1a;医疗、地产、电力、证券 今日预测 3118-3171-3181 今天量价配合不是很好&#xff0c;缩量…

VMware与CentOS的安装

VMware与CentOS的安装 第一章 VMware安装第二章 CentOS上网虚拟机网络IP修改地址配置修改主机名和hosts文件修改主机名称配置Linux克隆机主机名称映射hosts文件&#xff0c;打开/etc/hosts 安装Xshell7和Xftp7 第一章 VMware安装 VMware Workstation Pro 安装包 …

洗地机什么牌子最好?618高性价比家用洗地机品牌

随着科技的发展&#xff0c;智能智能清洁家电越来越受到消费者的欢迎。洗地机作为其中的佼佼者&#xff0c;已经成为许多家庭清洁的好帮手。然而&#xff0c;面对满目琳琅的洗地机品牌型号&#xff0c;究竟哪一款机型适合家用呢&#xff0c;正好618也临近了&#xff0c;又有哪些…